6 ms·
CSS3 Animation Cheat Sheet
- stephenitis 13y agoIts a little surprising that bootstrap 2.0/3.0 haven't implemented a similar feature. The actual http://www.justinaguilar.com/animations/css/animations.css http://www.justinaguilar.com/animations/css/animations.css sheet is more insightful in learning how to do your own animation effects. I just wish the code snippets were side by side the animations as I scroll around and select the examples.
- davidhariri 13y agodan eden made this exact thing ages ago: http://daneden.me/animate/ http://daneden.me/animate/
- cliveowen 13y agoThis one is meant to teach you how to do it yourself.
- cliveowen 13y agoVery useful, kudos!
- yapjonathan 13y agoH5BP put together a very comprehensive list. http://h5bp.github.io/Effeckt.css/dist/ http://h5bp.github.io/Effeckt.css/dist/
- vittore 13y agoIn fact I even thought it was unnamed fork of effeckt.
- itry 13y agoSomebody should give this guy a CSS3 Color Cheat Sheet. One entry would read "Grey Text on Grey Background: Non Readable".
- bgnm2000 13y agomy thoughts exactly
- harrisonpowers 13y agoSpent some time yesterday converting jQuery fadeIn/fadeOuts to CSS3 animations and ran into an issue. Changing the display style (display:none; to display:block;) disables CSS animations and transitions. There are workarounds - setting height to 0 and switching to auto, then animating the opacity - or moving the element off the screen. Took me a while to figure out why my simple animations weren't working... I had gotten used to display:none; not sure how I feel about height:0;
- deleted 13y ago[deleted]
- harrisonpowers 13y agoCreated a small script to take care of this. Hopefully someone else finds it useful. https://github.com/fijimunkii/CSS3.fadeIn.fadeOut.js https://github.com/fijimunkii/CSS3.fadeIn.fadeOut.js
- halisaurus 13y agoAre we all writing small jQuery scripts right into the HTML in a script tag? This post suggests that practice. I can see it being the faster option for just a 1-3 line script, what's the tipping point when we move it to an independent (minified) .js file? Is that just a readability issue? And why do I need all of jQuery to add/remove a class from one element? It seems there's a conflict here: Either there's little JS and no need for jQuery, or a lot of JS and no sense in dropping it in the HTML.
- kaonashi 13y agoThe js was just to add and remove the class; it was inline for documentation purposes.
- CountHackulus 13y agoGreat, now all Apple has to do is fix their performance bug with CSS transforms on iOS and I can consider using these.
- untog 13y agoApple? Apple has by far the best performance that I've seen when compared to Android and the like.
- CountHackulus 13y agoIn iOS5, css transforms worked great, a bug was introduced in iOS6 crippling the performance, it still hasn't been fixed in iOS7. I'm not comparing to Android, I'm just saying that a huge mobile market is basically unavailable with this feature.
- EastSmith 13y agoCool. Anyone know a mobile safe list of these kind of CSS3 animations?
- czbond 13y agoAbsolutely useful, thanks.