Does someone know how to do svg animations with CSS or small JS ?
Maybe there's a plugin to do that ?
https://wappalyzer.com/
MS-Edge doesn't support SMIL animations.
MS Edge doesn't support animating svg's with css either.
Google Chrome was planning to depricate SMIL (because you can use css animations instead), but they decided not to for now (but they probably will in the future)
So your remaining options are: javascript or give microsoft the finger and decide not to support their browser and use css animations (preferably) or SMIL.
Hope it helps and gives you some insight in what (not to) do. To answer in more detail I really need to know what you are trying to animate. That said, you should find plenty of examples/tutorials when you google for it. If you want to find something specific you can always check the Scalable Vector Graphics (SVG) 1.1 (Second Edition) Specification.
Related
I want to dive into the wonderful world of .svg animation for the website I'm working for.
I'm looking to do an icon that animates on hover. I have found multiple tutorials that can all help me out, however, I noticed that there are a lot of different ways to achieve an svg animation.
I can find very little info on what is the most supported way to animate an svg. Is it with a js library? The animate tag? css animation?
A js library seems best to me, but I like the idea of using css as well. Can someone tell me more about the browser support of these methods?
There are lots plugins are available to animate svg.few are listed here
snapsvg
GSAP
segmentjs
you can checkout crossbrowser compatibility here.
I am trying to execute a card flip animation that holds throughout IE10+, but I'm hitting a rut given that the IE has no support for transform-style: preserve-3d;. I've seen multiple "fixes" for this, but none will work with my code. I am hoping somebody from this awesome community can step in and help me figure out this hot mess!! Any and all help would be very much appreciated! Thank you so much in advance!
http://jsfiddle.net/rebeccatcook/E8mLp/
Internet Explorer supports transform-style since version 11 so you should be fine there. IE10 supports 3D transforms, but as you point out, does not support the transform-style property which specifies how nested elements are rendered in 3D space. This is why you are not seeing your "Back text".
I'm not sure what "fixes" your referring to but the common practice is to simply leverage "fall-back animations" that are supported by the specific browser version. For IE10 I would use modernizr to sniff browser features and append custom CSS classes to implement a a simple fade in/out effect.
If you absolutely have to have this effect without JavaScript, you could use IE Matrix filters but it can be a time suck getting it to act right. Here's a reference point: http://www.useragentman.com/IETransformsTranslator/
Good luck!
Is it possible to create the following without use of images, just using css3?
Yep. The relevant things you'll want to look up are gradients, text-shadow, and 2D transforms.
You'll need to do better with accepting answers to questions you've asked, and ask questions that show you've tried it yourself before you'll get better answers, most likely. People aren't going to give you the code if you've shown no effort to try to do it yourself.
Yes, it's possible.
CSS border-radius, gradients, text-shadow and #font-face will get you quite a bit of the way.
Those angled tabs are going to be a massive pain to get right, and likely to have cross-browser issues. You'll probably be able to get them right using CSS transform, but it'll require separate DOM elements for the edges, otherwise you'll transform your text as well.
The outward curves at the bottom of the tabs will also be tricky. I can't see an easy way to achieve that.
Assuming your aim is to do it without images, rather than simply as a CSS excersise, then a better solution might be to do it using SVG. You can incorporate SVG as elements within your page, so no separate downloads, and it should be fairly straightforward to achieve the results you want -- certainly much easier than with pure CSS.
SVG won't work in older versions of IE (IE8 and below), but since you're asking about CSS3, I assume that's not an issue for you. If it is an issue, then you can use a library like Raphael or SVG2VML to convert the SVG into VML on the fly for IE.
I'm just wondering what is the least expensive way to use a lot of gradients in a site's design.
I feel certain that CSS will be less expensive for the browser than SVG, but I could not justify this without tests. I would suggest that you create your page with your many gradients in CSS and if (and only if) you find performance to be a problem should you try SVG or other technologies.
I would lean more towards CSS for this one. Seeing as it is CODE rather than an image.
Also, if you are leaning more towards using CSS, why not make it viewable and or workable in IE 8 and below, via CSS3pie? http://css3pie.com/
This is an interesting question. In my personal experience webkit has been faster with svg, but I could be wrong.
I created a test fiddle with css transitions and they look about the same, perhaps someone with more experience can extend the stress case:
http://jsfiddle.net/KLCEw/
Keep in mind that SVG gradients are best embedded through data-uri's so they don't create new requests to the server.
There is, what I think is one of the best uses of CSS over images (the calendar icon) located at: http://chat.meta.stackoverflow.com/chats/transcripts/139?offset=120
But it doesn't work in IE8. Is it possible to convert this to work with IE?
I suppose we could use this jQuery code at: http://www.methvin.com/jquery/jq-corner-demo.html
I guess to summarize, there's no equivalent in IE of the -moz-border-radius property, eh?
You could look into PIE, it claims to bring CSS3 to the IEs:
CSS Level 3 brings with it some
incredibly powerful styling features.
Rounded corners, soft drop shadows,
gradient fills, and so on. These are
the kinds of elements our designer
friends love to use because they make
for attractive sites, but are
difficult and time-consuming to
implement, involving complex sprite
images, extra non-semantic markup,
large JavaScript libraries, and other
lovely hacks.
CSS3 promises to do away with all
that! But as we all know, due to
Internet Explorer’s lack of support
for any of these features, we must
be patient and refrain from using
them, and make do with the same old
tedious techniques for the foreseeable
future.
Or must we?
I'm looking at using it when it's time for my impending IE bugfix marathon.
Microsoft provides a list of links for Rounded Corners Solutions. The links includes great solutions for ie (not so great as border-radius of css3). I am sure you will find something for your needs.