Hacker News new | comments | show | ask | jobs | submit login
Crafting CSS3 Transitions and Animations (shayhowe.com)
68 points by shay-howe 1800 days ago | hide | past | web | favorite | 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.

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.

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

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

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

Applications are open for YC Summer 2018

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact