Just wanted to introduce the compass animate plugin. It great and saved our lots of efforts.
A normal css animation looks like this:
@keyframes my-animation { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blue; } } .box { animation: my-animation 10s infinite alternate; }
But that’s not the reality, you need to include all the vendors 😡 , your code gets from 1x to 4-5x of lines immediately. Multiple times copy pasting the same code and changing the vendor can be really confusing, it definitely breaks your concentration and you end up in a css animation which does not work in one of the browsers, and which you can not debug. Compass Animate will help you here. With @include keyframes()
you can do all the magic and forget about any errors, confusions or debugging. Just writing this much:
@include keyframes(my-animation) { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blue; } } .box { @include animation(my-animation 10s infinite alternate); }
Will generate you this much:
@-webkit-keyframes my-animation { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blue; } } @-moz-keyframes my-animation { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blue; } } @-o-keyframes my-animation { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blue; } } @keyframes my-animation { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blue; } } .box { -webkit-animation: my-animation 10s infinite alternate; -moz-animation: my-animation 10s infinite alternate; -o-animation: my-animation 10s infinite alternate; animation: my-animation 10s infinite alternate; }
And that was only one great feature, compass-animate is loaded with loads for awesome features and built in animations and effects.
Have a look 🙂