title: css animate elements left to right with pause in between
body: <p>I have a row of four icons I want to animate from right to left but I want the animation to pause at some point so the each icon will be visible one after the other in a circled mask. 
  I just can't figure how to pause in a middle of a keyframe. I want to know if it's possible and if it's possible without any Javascript
  Thanks a lot</p>
  
  <p>here is what I have now:</p>
  
  <pre><code> @keyframes move {
    0% {
      opacity: 0;
      -webkit-transform: translateX(200%);
      -moz-transform: translateX(200%);
      -ms-transform: translateX(200%);
      -o-transform: translateX(200%);
      transform: translateX(200%);
    }
    25% {
      opacity: 1;
    }
    50% {
      -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -o-transform: translateX(0%);
      transform: translateX(0%);
    }
    75% {
      -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -o-transform: translateX(0%);
      transform: translateX(0%);
    }
  .icons {
    -webkit-animation: move 4s ease-in 2;
    -moz-animation: move 4s ease-in 2;
    animation: move 4s ease-in 2;
  }
    100% {
      -webkit-transform: translateX(-200%);
      -moz-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      -o-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }
  </code></pre>
  
  <p>thanks in advance for your help</p>