Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Animatable: One property, two values, endless possiblities (leaverou.github.io)
97 points by Dekku on Aug 1, 2013 | hide | past | favorite | 19 comments


I highly recommend front-end developers keep up to date with Lea Verou's blog and talks. She's a great ambassador for standards-based development and maintains a great sense of whimsy.

I really recommend her recent talk on border-radius, for example: http://vimeo.com/67567648


Thanks for the recommendation and video link.

I had no idea who Verou was. I'm so behind.


The demo works in Firefox, not just Chrome. What is this, some kind of standard that works across many different implementations? ;)

Too often do demos for showing off the web work well only in Chrome. This one works fine in Fireox, the animations are very smooth. I'm on a very basic Arch Linux setup I installed a couple of days ago, with no configs in any way other than installing the correct driver for my on-chip Intel GPU. So if it works for me, it should work for most people.


Even better, most of the demos work fine in IE10! It's like everyone is converging on some kind of central specification on how web pages can animate...


Hmm. Working for me in Chrome. OS X & Chrome Version 28.0.1500.71


This is actually a really good learning tool for showing people what different html/css properties do by visually showing the ranges and effects they give.



This is really cool! I'm in my first job where I'm having to touch some front end things, and this is definitely going to come in handy in learning how various style elements work and interact with one another. Who knows, maybe I'll end up using this library in some stuff!


#19 shows an interesting bug (I believe a bug) in outline styles: the z-index of the outline is above all previous elements but below all elements that follow (chrome). I hope this is fixed cuz I'd like to use outline.

Another awesome demo from Lea Verou!!


All of the border-width examples act somewhat strangely on Chrome and Firefox both.

Otherwise, this is great. I love these demos as they really give you an intuitive sense of how CSS works.


Is this a script that does something, or just a demo for what most frontend developers already do on a daily basis?


#35 gives me a seizure if my mouse isn't perfectly still while hovering.


#15 is broken - sort of. It works, but breaks the page layout.


Not for me in Chrome.


Even in Chrome, 22 pushes 24 right off the end of the line which means everything after that randomly jumps around.


Yeah, it seems to work better in Chrome than in Firefox. :-(


works excellent in Chrome


Why is everyone fawning over something we all here could easily make in Flash?

This problem was solved 10 years ago, people. Let it be a reminder that we've regressed.


I refuse to believe you earnestly do not understand why people have ditched Flash for most animation on the web today.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: