title: Transform not working on Android
body: <p>UPDATE:</p>
  
  <p>i have changed this animation declaration instead of <code>animation: rotate linear infinite;</code> with no effect (website uploaded, you can see live on it link below)</p>
  
  <pre><code>.initialLoader, .initialLoader:before, .initialLoader:after {
    position: absolute;
    border: 3px solid transparent;
    border-top: 3px solid white;
    border-radius: 50%;
  
      -webkit-animation-name: rotate;
      -webkit-animation-duration: 1.05s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
  
      animation-name: rotate;
      animation-duration: 1.05s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
  
   content: '';
  }
  </code></pre>
  
  <hr>
  
  <p>I am not very familiar with transitions and transforms in CSS, and so I have this question:</p>
  
  <p>If you open <a href="http://www.germanalvarez.net/5" rel="nofollow">www.germanalvarez.net/5</a> from any browser, you'll see circular bars loading animation (named rotate), and then another smart cursor pulsing animation (named pulse).</p>
  
  <p>Both work from Chrome and Firefox but the first one does not work on my Android (Galaxy GT-I9300 (android 4.3), if I access the site trough my mobile device it just animates nothing, but the second one does. I can't find where the bug is.</p>
  
  <p>Live demo in <a href="http://www.germanalvarez.net/5" rel="nofollow">www.germanalvarez.net/5</a> </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="initialLoader"&gt;&lt;/div&gt;
  &lt;div class="initialHi"&gt;&lt;div class='initialAnimation'&gt;&lt;ul class='letters'&gt;&lt;/ul&gt;&lt;div class='cursor'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.initialLoader, .initialLoader:before, .initialLoader:after {
    position: absolute;
    border: 3px solid transparent;
    border-top: 3px solid white;
    border-radius: 50%;
       -webkit-animation: rotate linear infinite;
        -moz-animation: rotate linear infinite;
     -ms-animation: rotate linear infinite;
     -o-animation: rotate linear infinite;
    animation: rotate linear infinite;
  
       -webkit-animation-duration: 1.05s;
  -moz-animation-duration: 1.05s;
     -ms-animation-duration: 1.05s;
     -o-animation-duration: 1.05s;
     animation-duration: 1.05s;
   content: '';
  }
  
  .initialLoader {
    height: 100px;
    width: 100px;
       position:absolute;
     margin: -50px 0 0 -50px;
     top:50%;
     left:50%;
        -webkit-animation-duration: 1.05s;
      -moz-animation-duration: 1.05s;
     -ms-animation-duration: 1.05s;
     -o-animation-duration: 1.05s;
     animation-duration: 1.05s;
  }
  
  .initialLoader:before {
    height: 75px;
    width: 75px;
    top: 10px;
    left: 10px;
       -webkit-animation-duration: 10s;
    -moz-animation-duration: 10s;
     -ms-animation-duration: 10s;
     -o-animation-duration: 10s;
     animation-duration: 10s;
  
  
  }
  
  .initialLoader:after {
    height: 50px;
    width: 50px;
    top: 22px;
    left: 22px;
       -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
     -ms-animation-duration: 4s;
     -o-animation-duration: 4s;
     animation-duration: 4s;
  
  
  }
  @-webkit-keyframes rotate {
    from {   -webkit-transform: rotateZ(360deg);  }
    to {    -webkit-transform: rotateZ(0deg);  }
  }
  
  
  @keyframes rotate {
    from {    transform: rotateZ(360deg);  }
    to {    transform: rotateZ(0deg);  }
  }
  
  
  
  .initialAnimation{
     font-family: 'Electrolize',Arial;
     color:white;
     cursor:pointer;
     font-size:1.3em;
     text-shadow: 0px 0px 10px rgba(255,255,255,0.5);
  }
  
  
  .initialHi{
        position:absolute;
     margin: -15px 0 0 -60px;
  width:120px; height:auto;
  top:50%;
     left:50%;
  
  
  }
  
  .cursor{
     opacity:0;
    display: inline-block;
    width: 6px;
    height: 1.3em;
    background-color:white;
    margin-top: -6px; 
    background: rgba(255,255,255,0.9);
    box-shadow: 0px 0px 10px rgba(255,255,255,0.5);
       -moz-animation: appear 0.1s linear 1 normal;
     -webkit-animation: pulse  0.4s linear infinite normal;
     -ms-animation: pulse  0.4s linear infinite normal;
     -o-animation: pulse  0.4s linear infinite normal;
     animation: pulse  0.4s linear infinite  normal;
  
    }
  
  
  
  
  @-webkit-keyframes pulse {
    0% {    background: rgba(255,255,255,0.9);    box-shadow: 0px 0px 40px 2px rgba(105,135,255,1);  }
    100% {    background: rgba(255,255,255,0);    box-shadow: 0px 0px 30px 2px rgba(105,135,255,0.3);  }
  }
  
  @keyframes pulse {
    0% {    background: rgba(255,255,255,0.9);    box-shadow: 0px 0px 40px 2px rgba(105,135,255,1);  }
    100% {    background: rgba(255,255,255,0);    box-shadow: 0px 0px 30px 2px rgba(105,135,255,0.3);  }
  }
  </code></pre>