title: How to make CSS animation not reverse after finishing? Example inside
body: <p>I currently have a picture that is rotating and scaling using keyframes, but my problem is that after every iteration it reverses rotation direction. How do I stop this from happening so that the rotating is smooth in one direction? <a href="https://jsfiddle.net/hmggqr6v/" rel="nofollow">JSFiddle</a>. See full webpage HTML here: </p>
  
  <pre><code>&lt;html class="fourzerofour"&gt;
  &lt;head&gt;
    &lt;!-- Hey, look at you, you know how to view the source code, well done! Here's a unicode cookie: --&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Egrodo | 404&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="../CSS/error404.css" media="screen, projection" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="../CSS/materialize.css" /&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'&gt;
    &lt;link rel='shortcut icon' href='../favicon.ico' type='image/x-icon'/ &gt;
  &lt;/head&gt;
  
  &lt;body class="fourzerofour"&gt;
    &lt;section class="fourzerofour"&gt;
      &lt;p class="fourzerofour"&gt;
        404 - What have you done?!?
      &lt;/p&gt;
      &lt;img draggable="false" class="rotating fourzerofour" src="https://i.imgur.com/n5SVALx.png"&gt;
    &lt;/section&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and my full page CSS here: </p>
  
  <pre><code>body {
    font-family: 'Raleway', sans-serif;
  }
  p.fourzerofour {
    font-size: 2.4em;
    color: white;
    display: block;
    margin-top: -2em;
    margin-bottom: 2em;
  }
  
  body.fourzerofour {
    height: 100%;
    background-color: darkgrey;
  }
  section.fourzerofour {
    position: relative;
    height: 100%;
    text-align: center;
    margin-top: 23%;
  
  }
  
  .rotating {
    -webkit-animation: rotating 3s linear infinite;
    -moz-animation: rotating 3s linear infinite;
    -ms-animation: rotating 3s linear infinite;
    -o-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;
    animation-direction: alternate;
    width: 10em;
  }
  
  p.fourzerofour + .rotating:active {
    -webkit-filter: invert(1);
  }
  
  @-webkit-keyframes rotating /* Safari and Chrome */ {
    0% {
      -ms-transform: rotate(0deg) scale(.1);
      -moz-transform: rotate(0deg) scale(.1);
      -webkit-transform: rotate(0deg) scale(.1);
      -o-transform: rotate(0deg) scale(.1);
      transform: rotate(0deg) scale(.1);
    }
    50% {
      -ms-transform: rotate(360deg) scale(1);
      -moz-transform: rotate(360deg) scale(1);
      -webkit-transform: rotate(360deg) scale(1);
      -o-transform: rotate(360deg) scale(1);
      transform: rotate(360deg) scale(1):
    }
    100% {
      -ms-transform: rotate(0deg) scale(.1);
      -moz-transform: rotate(0deg) scale(.1);
      -webkit-transform: rotate(0deg) scale(.1);
      -o-transform: rotate(0deg) scale(.1);
      transform: rotate(0deg) scale(.1);
    }
  }
  
  @keyframes rotating {
    0% {
      -ms-transform: rotate(0deg) scale(.1);
      -moz-transform: rotate(0deg) scale(.1);
      -webkit-transform: rotate(0deg) scale(.1);
      -o-transform: rotate(0deg) scale(.1);
      transform: rotate(0deg) scale(.1);
    }
    50% {
      -ms-transform: rotate(360deg) scale(1);
      -moz-transform: rotate(360deg) scale(1);
      -webkit-transform: rotate(360deg) sscale(1);
      -o-transform: rotate(360deg) scale(1);
      transform: rotate(360deg) scale(1);
    }
    100% {
      -ms-transform: rotate(0deg) scale(.1);
      -moz-transform: rotate(0deg) scale(.1);
      -webkit-transform: rotate(0deg) scale(.1);
      -o-transform: rotate(0deg) scale(.1);
      transform: rotate(0deg) scale(.1);
    }
  }
  </code></pre>