CSS3 Train Animation. CSS3 Animations and Keyframe Project using Sass and bourbon mixins

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

<h1>Hello</h1>


<section class="right-to-left-block">
    <aside>What is it about?</aside>
    <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>



<section class="demo">
    <div id="run-demo" class="box"></div>
</section>



</body>
</html>

@import "../bourbon/bourbon";

@import "../neat/neat";

// Bourbon mixin with Sass

h1 {
  font-family: $helvetica;
  font-size: golden-ratio(18px,  1);
}

section {
  @include outer-container;
  aside { @include span-columns(4); }
  article { @include span-columns(2); }
}

@include direction-context(right-to-left) {
  .right-to-left-block {
    @include span-columns(6);
  }
}

div.box {
  border-radius: 40px;
  border: 1px solid #2aa4b2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  height: 40px;
  background-color: #8fdce5;
  background-image: -webkit-linear-gradient(#8fdce5, #3dc3d1);
  background-image: linear-gradient(#8fdce5, #3dc3d1);
  width: 40px; }

div.box:hover {
  // Animation shorthand works the same as the CSS3 animation shorthand
  @include animation(scale 1.0s ease-in, slide 2.0s ease);

  // The above outputs the same CSS as using independent, granular mixins.
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);
}

CSS3 Train Animation. CSS3 Animations and Keyframe Project using Sass and bourbon mixins