title: CSS transitions shaking in chrome and IE
body: <p>I am new to developing, can anyone please help me with this.. css transitions are shaking in chrome and IE, I have tried all possible styling to correct it, but could'nt. please help!.</p>
  
  <p>here is the fiddle
  <a href="https://jsfiddle.net/Khan_Z/qoL4xqhq/" rel="nofollow">https://jsfiddle.net/Khan_Z/qoL4xqhq/</a></p>
  
  <pre><code>&lt;header&gt;
    &lt;h2 id="head1"&gt;&lt;span&gt;Sometimes &lt;/span&gt;&lt;span&gt;you win &lt;/span&gt; &lt;span&gt;sometimes&lt;/span&gt; &lt;span&gt;you learn&lt;/span&gt;&lt;/h2&gt;
       &lt;div&gt;
          &lt;h2 id="head2" class="subtitle fancy"&gt;&lt;span&gt;Hi&lt;/span&gt;&lt;/h2&gt;
          &lt;h2 id="head3" &gt;ABCD&lt;/h2&gt;
          &lt;p id="head4"&gt;UVWXYZ:)&lt;/p&gt;
  
       &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#head1{
   width:100%;
   margin-top:375px ;
   font-size:40px;
      text-align:center;
   position:absolute;
  }
  #head2{
   
   position:absolute;
   font-size:42px;
   
   margin-top:450px;
   text-align:center;
   margin-left:47%;
   
  }
  #head3{
  
   position:absolute;
   margin-top:460px;
   margin-left:43%;
   font-size:40px;
   
   line-height:2;
   text-align:center;
  }
  #head4{
   
   position:absolute;
   margin-top:510px;
   margin-left:40%;
   font-size:35px;
   
   text-align:center;
  }
  #head1{
   
   -webkit-animation: none;
   -moz-animation: none;
   -ms-animation:none;
       animation: none;
   color: #fff;
   text-shadow: 0px 0px 1px #CCCCCC;
  }
  
  #head1 span {
   -webkit-animation: blurFadeIn 1s ease-in 0s backwards;
   -moz-animation: blurFadeIn 1s ease-in 0s backwards;
   -ms-animation: blurFadeIn 1s ease-in 0s backwards;
   animation: blurFadeIn 1s ease-in 0s backwards;
   color: black;
   text-shadow: 0px 0px 1px #CCCCCC;
  }
  #head1 span:nth-child(2) {
   -webkit-animation-delay: 1s;
   -moz-animation-delay: 1s;
   
   animation-delay: 1s;
  }
  #head1 span:nth-child(3) {
   -webkit-animation-delay: 2s;
   -moz-animation-delay: 2s;
   
   animation-delay: 2s;
  }
  #head1 span:nth-child(4) {
   -webkit-animation-delay: 3s;
   -moz-animation-delay: 3s;
   
   animation-delay: 3s;
  }
  
  #head2 {
   
   
   -webkit-animation: blurFadeIn 1s ease-in 0s backwards;
   -moz-animation: blurFadeIn 1s ease-in 0s backwards;
   -ms-animation: blurFadeIn 1s ease-in 0s backwards;
   animation: blurFadeIn 1s ease-in 0s backwards;
   color:black;
   text-shadow: 0px 0px 1px #CCCCCC;
  }
  #head2 {
   -webkit-animation-delay: 5s;
   -moz-animation-delay: 5s;
   -ms-animation-delay:5s;
   animation-delay: 5s;
   
  }
  #head3 {
   
   
   -webkit-animation: blurFadeIn 1s ease-in 0s backwards;
   -moz-animation: blurFadeIn 1s ease-in 0s backwards;
   -ms-animation: blurFadeIn 1s ease-in 0s backwards;
   animation: blurFadeIn 1s ease-in 0s backwards;
   color: black;
   
   text-shadow: 0px 0px 1px #CCCCCC;
  }
  #head3 {
   -webkit-animation-delay: 5s;
   -moz-animation-delay: 5s;
   -ms-animation-delay:5s;
   animation-delay: 5s;
   
  }
  #head4{
   
   
   -webkit-animation: blurFadeIn 1s ease-in 0s backwards;
   -moz-animation: blurFadeIn 1s ease-in 0s backwards;
   -ms-animation: blurFadeIn 1s ease-in 0s backwards;
   animation: blurFadeIn 1s ease-in 0s backwards;
   color: black;
     text-shadow: 0px 0px 1px #CCCCCC;
  }
  #head4 {
   
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -ms-animation-delay:6s;
   animation-delay: 6s;
  
  }
  
  @-webkit-keyframes blurFadeInOut{
   0%{
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
        -webkit-backface-visibility:hidden;
    -webkit-transform: scale(1.3);
       transform: scale(1.3);
   }
   20%,75%{
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
      -webkit-backface-visibility:hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
   }
   100%{
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-backface-visibility:hidden;
    -webkit-transform: scale(0);
    transform: scale(0);
   }
  }
  @-webkit-keyframes blurFadeIn{
   0%{
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
      -webkit-backface-visibility:hidden;
    -webkit-transform:scale(1.3);
    transform: scale(1.3);
   }
   50%{
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
      -webkit-backface-visibility:hidden;
          -webkit-transform: scale(1.1);
    transform: scale(1.1);
   }
   100%{
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
      -webkit-backface-visibility:hidden;
    -webkit-transform:  scale(1);
       transform: scale(1);
   }
  }
  @-webkit-keyframes fadeInBack{
   0%{
    opacity: 0;
       -webkit-backface-visibility:hidden;
    -webkit-transform: scale(0);
        transform: scale(0);
   }
   50%{
    opacity: 0.4;
    -webkit-transform: scale(2);
    -webkit-backface-visibility:hidden;
    -webkit-transform:scale(2);
        transform: scale(2);
   }
   100%{
    opacity: 0.2;
         -webkit-backface-visibility:hidden;
    -webkit-transform:scale(5);
    transform: scale(5);
   }
  }
  @-webkit-keyframes fadeInRotate{
   0%{
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
    transform: scale(0);
    -webkit-backface-visibility:hidden;
    -webkit-transform:  scale(0) ;
  
   }
   100%{
    opacity: 1;
    -webkit-transform: scale(1) rotate(-0deg);
    transform: scale(1);
    -webkit-backface-visibility:hidden;
    -webkit-transform: scale(1);
    
   }
  }</code></pre>
  </div>
  </div>
  </p>