This is outrageously cool. Really nicely executed.
That said, it does rather illustrate just how nasty the syntax is for creating animations with CSS.
That said, it does rather illustrate just how nasty the syntax is for creating animations with CSS.
WAY too much CSS to do something like that. I'm not sure what the fix is though? A JS library to generate the CSS animation with a saner syntax (I realise CSS probably needs all of that stuff to be extendable but it's a massive amount of code for something that should be easier to accomplish IMHO).
The most logical solution would be the way we extend CSS syntax today - preprocessors like LESS and SASS. You don't need to render the valid CSS clientside, you can just compile it into CSS before you deploy it.
Especially in contrast with how quickly and concisely the heart was build. All the building blocks were never meant to build hearts or shapes other than boxes. The animation elements on the other hand are used for their intended purpose and still...
He also created two animation. One that us subtle in the background and the beating of the heart.
That being said, yes. They are a pain to write.