3 ms·

This is outrageously cool. Really nicely executed. That said, it does rather illustrate just how nasty the syntax is for creating animations with CSS.

joshstrange 12y ago
I was just thinking that. I don't do much with CSS directly (I know enough to be dangerous) but I kept thinking "Ok, now it will start beating" and then 2-3 more lines of practically gibberish and rinse and repeat until the end when it started beating. 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).
- omegavesko 12y ago
  >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.
zerocrates 12y ago
Chrome/Blink is apparently enabling unprefixed animations in Chrome 43, so that will soon just leave Safari requiring all that -webkit- business.
weinzierl 12y ago
> That said, it does rather illustrate just how nasty the syntax is for creating animations with CSS. 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...
Raphmedia 12y ago
It isn't that bad. Remember that he prefixed for webkit and also wrote everything by hand. Most of CSS is written using mixins/functions these days or at the very least with some help with the text editor. 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.
underwater 12y ago
This isn't really a fair representation of the syntax. He's using vendor prefixes, defining properties that typically aren't needed (custom timing functions), and has broken rules up over multiple blocks for the sake of this demo. In typical usage the code would be two or three times more concise.

joshstrange 12y ago

I was just thinking that. I don't do much with CSS directly (I know enough to be dangerous) but I kept thinking "Ok, now it will start beating" and then 2-3 more lines of practically gibberish and rinse and repeat until the end when it started beating. 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).

omegavesko 12y ago
>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.

zerocrates 12y ago

Chrome/Blink is apparently enabling unprefixed animations in Chrome 43, so that will soon just leave Safari requiring all that -webkit- business.

weinzierl 12y ago

> That said, it does rather illustrate just how nasty the syntax is for creating animations with CSS. 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...

Raphmedia 12y ago

It isn't that bad. Remember that he prefixed for webkit and also wrote everything by hand. Most of CSS is written using mixins/functions these days or at the very least with some help with the text editor. 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.

underwater 12y ago

This isn't really a fair representation of the syntax. He's using vendor prefixes, defining properties that typically aren't needed (custom timing functions), and has broken rules up over multiple blocks for the sake of this demo. In typical usage the code would be two or three times more concise.