title: Animation-delay not working properly on iOS, why?
body: <p>I have following code in the snippet.
  It works fine everywhere except iOS - I suppose the problem is in animation delay as some of animatad paragraphs are animated in the same time.
  You can see the demonstration <a href="http://stassabiomassa.com/" rel="nofollow">http://stassabiomassa.com/</a> (the words coming out of left dragons' head).</p>
  
  <p>Does anybody know the issue? Please help. Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dragon-speech:nth-of-type(1){
      -webkit-animation-name: dragon-speech_animation;
      -moz-animation-name: dragon-speech_animation;
      -ms-animation-name: dragon-speech_animation;
      -o-animation-name: dragon-speech_animation;
      animation-name: dragon-speech_animation;
      -webkit-animation-duration: 10s;
      -moz-animation-duration: 10s;
      -ms-animation-duration: 10s;
      -o-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-timing-function: linear;
      -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
      -o-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      -ms-animation-delay: 0.2s;
      -o-animation-delay: 0.2s;
      animation-delay: 0.2s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
  }
  
  .dragon-speech:nth-of-type(2){
      -webkit-animation-name: dragon-speech_animation;
      -moz-animation-name: dragon-speech_animation;
      -ms-animation-name: dragon-speech_animation;
      -o-animation-name: dragon-speech_animation;
      animation-name: dragon-speech_animation;
      -webkit-animation-duration: 10s;
      -moz-animation-duration: 10s;
      -ms-animation-duration: 10s;
      -o-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-timing-function: linear;
      -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
      -o-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-delay: 2.2s;
      -moz-animation-delay: 2.2s;
      -ms-animation-delay: 2.2s;
      -o-animation-delay: 2.2s;
      animation-delay: 2.2s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
  }
  
  .dragon-speech:nth-of-type(3){
      -webkit-animation-name: dragon-speech_animation;
      -moz-animation-name: dragon-speech_animation;
      -ms-animation-name: dragon-speech_animation;
      -o-animation-name: dragon-speech_animation;
      animation-name: dragon-speech_animation;
      -webkit-animation-duration: 10s;
      -moz-animation-duration: 10s;
      -ms-animation-duration: 10s;
      -o-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-timing-function: linear;
      -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
      -o-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-delay: 4.2s;
      -moz-animation-delay: 4.2s;
      -ms-animation-delay: 4.2s;
      -o-animation-delay: 4.2s;
      animation-delay: 4.2s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
  }
  
  .dragon-speech:nth-of-type(4){
      -webkit-animation-name: dragon-speech_animation;
      -moz-animation-name: dragon-speech_animation;
      -ms-animation-name: dragon-speech_animation;
      -o-animation-name: dragon-speech_animation;
      animation-name: dragon-speech_animation;
      -webkit-animation-duration: 10s;
      -moz-animation-duration: 10s;
      -ms-animation-duration: 10s;
      -o-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-timing-function: linear;
      -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
      -o-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-delay: 6.2s;
      -moz-animation-delay: 6.2s;
      -ms-animation-delay: 6.2s;
      -o-animation-delay: 6.2s;
      animation-delay: 6.2s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
  }
  
  .dragon-speech:nth-of-type(5){
      -webkit-animation-name: dragon-speech_animation;
      -moz-animation-name: dragon-speech_animation;
      -ms-animation-name: dragon-speech_animation;
      -o-animation-name: dragon-speech_animation;
      animation-name: dragon-speech_animation;
      -webkit-animation-duration: 10s;
      -moz-animation-duration: 10s;
      -ms-animation-duration: 10s;
      -o-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-timing-function: linear;
      -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
      -o-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-delay: 8.2s;
      -moz-animation-delay: 8.2s;
      -ms-animation-delay: 8.2s;
      -o-animation-delay: 8.2s;
      animation-delay: 8.2s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="dragon-speech"&gt;Муха!&lt;/p&gt;
  &lt;p class="dragon-speech"&gt;Муха бесит!&lt;/p&gt;
  &lt;p class="dragon-speech"&gt;Пришлепни!&lt;/p&gt;
  &lt;p class="dragon-speech"&gt;Придави ее!&lt;/p&gt;
  &lt;p class="dragon-speech"&gt;Муха!!!&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>