Css error

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="logo">
      <span class="speedometer"></span>
      <span class="needle" id="ndl"></span>
    </div>
  </body>
</html>

CSS

#logo
    {
      display: inline-block;
      position: relative;
    }
    #logo .speedometer
    {
      width: 80px;
      height: 80px;
      border-radius: 100%;
      border: 20px solid #000;
      border-right: 20px solid white;
      border-bottom: 20px solid white;
      -webkit-transform: rotate(45deg);
      display: inline-block;
    }
    #logo .needle
    {
      width: 5px;
      height: 55px;
      background: #999999;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 100%;
      border-top-right-radius: 100%;
      display: inline-block;
      left: 57px;
      position: absolute;
      top: 5px;
      animation-duration: 3s;
      animation-name: move;
      animation-direction: alternate;
      animation-timing-function: linear;
      transform-origin: bottom;
    }

    @-webkit-keyframes move{
      000%{ transform: rotate(-90deg); }
      100%{ transform: rotate(+90deg); }
    }

JavaScript

setTimeout(
  function() {
    document.getElementById('ndl').style.animationPlayState = "paused";
  }
, 3000);