Animations View source

The animation mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.

{% highlight scss %} box:hover { @include animation-name(scale, slide); @include animation-duration(2s); @include animation-timing-function(ease); @include animation-iteration-count(infinite); // Animation shorthand works the same as the CSS3 animation shorthand @include animation(scale 1.0s ease-in, slide 2.0s ease); } {% endhighlight %}

Demo