Hacker Newsnew | comments | ask | jobs | submitlogin
Crafting CSS3 Transitions and Animations (shayhowe.com)
59 points by shay-howe 425 days ago | comments


seanalltogether 425 days ago | link

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.

-----

ibudiallo 425 days ago | link

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.

-----

scrrr 425 days ago | link

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

-----

mnicole 425 days ago | link

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.

-----

greaterweb 425 days ago | link

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/

-----

adangit 425 days ago | link

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

-----

modernerd 425 days ago | link

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

-----

pkandathil 425 days ago | link

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

-----




Lists | RSS | Bookmarklet | Guidelines | FAQ | DMCA | News News | Feature Requests | Bugs | Y Combinator | Apply | Library

Search: