Crafting CSS3 Transitions and Animations

learn.shayhowe.com

68 points·shay-howe··8 comments

One caveat to add about css animations. I learned last night that animations don't respect fractional pixel values, so if you want to move something very slowly, like moving an image 10px over 2 seconds, the animation will be very jerky, and you need to use canvas to get the desired effect.

I love the transition and animation capabilities of css3. But I just can't get a hang of writing all these vendor specific code. If only there was jquery for css.

You could use LESS or something similar, fork a repo like this one [1] and start adding your stuff.

[1] https://github.com/anthonyvscode/Less-CSS3-Mixins

By leveraging LESS or SASS you can create mixins which handle the vendor prefixing for you. For those new to LESS or SASS, the addition will require you to update your workflow a bit to compile the syntax down to vanilla CSS. This minimal impact though is far outweighed by the benefits of managing less style rules in your LESS or SASS file(s).

If JS is an option for your project, you can also consider libraries such as Anima http://lvivski.github.com/anima/

There's http://lesselements.com/ for vendor-prefixes & https://github.com/machito/animate.less (based on http://daneden.me/animate/) for some pre-made animations.

Curious, what are the best animations or transitions you've already come across on the web?

These hover effects are neat: http://tympanus.net/Tutorials/OriginalHoverEffects/index10.h...

Finally a post where you learn to do something. Thank you!

Reply on news.ycombinator.com