title: CSS3 Animation pendulum effect
body: <p>I want pendulum effect with pure CSS but it's not smooth.</p>
  
  <p>Here is what I want, but with pure CSS. <a href="http://www.webdevdoor.com/demos/html5-pendulum-demo/" rel="nofollow">http://www.webdevdoor.com/demos/html5-pendulum-demo/</a></p>
  
  <p>But I prefer more looked like natural speed variation according to it's position.</p>
  
  <p><a href="http://jsfiddle.net/MadanBhandari/b4kbubwb/" rel="nofollow"><strong>Fiddle</strong></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bellImg {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 10px;
    top: 18px;
    -webkit-animation-name: rotate;
    animation-delay: 3s;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
    -webkit-transform-origin: 50% 0%;
    -webkit-animation-timing-function: ease-in-out;
  }
  @-webkit-keyframes rotate {
    0% {
      -webkit-transform: rotate(0deg);
    }
    10% {
      -webkit-transform: rotate(10deg);
    }
    20% {
      -webkit-transform: rotate(20deg);
    }
    30% {
      -webkit-transform: rotate(10deg);
    }
    40% {
      -webkit-transform: rotate(5deg);
    }
    50% {
      -webkit-transform: rotate(0deg);
    }
    60% {
      -webkit-transform: rotate(-5deg);
    }
    70% {
      -webkit-transform: rotate(-10deg);
    }
    80% {
      -webkit-transform: rotate(-20deg);
    }
    90% {
      -webkit-transform: rotate(-10deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="bellImg" src="img/bell.png"&gt;</code></pre>
  </div>
  </div>
  </p>