Contents

<section id="animations">
  <h2>Animations <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_animation.scss">View source</a></h2>
  <p>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.</p>

{% 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 %}
  <h3>Demo</h3>
  <section class="demo">
    <div id="run-demo" class="box"></div>
  </section>
</section>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
bourbon-2.1.0	_includes/animation.html