title: CSS3 keyframe animation not working in firefox and IE
body: <p>My css code works in chrome and safari but not on Firefox, IE and Opera.
  when i create @keyframes rotate {} , for other browsers, this not worked
  is that for this 4 line:
      <code>animation-duration: 4s;</code><br>
      <code>animation-timing-function: linear;</code>
      <code>animation-name:"rotate";</code>
      <code>animation-iteration-count: infinite;</code>
  or for keyframe method?
  how can i fix this?</p>
  
  <p>CSS:</p>
  
  <pre><code>@-webkit-keyframes rotate {
  0% {
      -webkit-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
      background-color:#2187e7;
      background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
      background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
  }  
  
    13% {
      -webkit-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
    }
    25% {
    -webkit-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
    }
    38% {
    -webkit-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
    }
    50% {
    -webkit-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
    }
    63% {
    -webkit-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
    }
    75% {
    -webkit-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
    }
    88% {
    -webkit-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
    }
      100% {
      -webkit-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
      }
  }
  /************** F I R E F O X ***********************/
  @-moz-keyframes rotate {
  0% {
      -moz-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
      background-color:#2187e7;
      background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
      background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
  }  
  
    13% {
      -moz-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
     }
    25% {
    -moz-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
    }
    38% {
    -moz-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
    }
    50% {
    -moz-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
    }
    63% {
    -moz-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
    }
    75% {
    -moz-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
    }
    88% {
    -moz-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
    }
      100% {
      -moz-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
      }
  }
  /************************************/
  @keyframes rotate {
      0% {
      transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px)     rotate(0deg);
      background-color:#2187e7;
      background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
      background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
      }  
  
    13% {
      transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
     }
    25% {
    transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
    }
    38% {
    transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
    }
    50% {
    transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
    }
    63% {
    transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
    }
    75% {
    transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
    }
    88% {
    transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
    }
          100% {
      transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
          }
          }
      /************** I E ***********************/
  @-ms-keyframes rotate {
      0% {
      -ms-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
      background-color:#2187e7;
      background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
      background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
      }  
  
    13% {
      -ms-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
     }
    25% {
    -ms-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
    }
    38% {
    -ms-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
    }
    50% {
    -ms-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
    }
    63% {
    -ms-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
    }
    75% {
    -ms-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
    }
    88% {
    -ms-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
    }
      100% {
      -ms-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
      }
  }
  /************************************/
  @-o-keyframes rotate {
  0% {
      -o-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
      background-color:#2187e7;
      background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
      background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
      }  
  
    13% {
      -o-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
     }
    25% {
    -o-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
    }
    38% {
    -o-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
    }
    50% {
    -o-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
    }
    63% {
    -o-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
    }
    75% {
    -o-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
    }
    88% {
    -o-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
    }
      100% {
      -o-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
  }
  }
  
  /*************************************/
  #circle {
  height: 10px;
  width: 10px;
  border-radius:25px;
  background-color:#2187e7;
  background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
  background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
  
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name:"rotate";
  -webkit-animation-iteration-count: infinite;
  
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-name:"rotate";
  animation-iteration-count: infinite;
  
  -moz-animation-duration: 4s;
  -moz-animation-timing-function: linear;
  -moz-animation-name:"rotate";
  -moz-animation-iteration-count: infinite;
  
  -ms-animation-duration: 4s;
  -ms-animation-timing-function: linear;
  -ms-animation-name:"rotate";
  -ms-animation-iteration-count: infinite;
  
  -o-animation-duration: 4s;
  -o-animation-timing-function: linear;
  -o-animation-name:"rotate";
  -o-animation-iteration-count: infinite;
  
  position:absolute;
  left:-1%;
  top:-1%; 
  }
  </code></pre>