CSS3アニメーションはtransitionとanimationの2つの種類があります。使い分けは以下です。 transition　→　1工程だけ。変化するまでを指定する。
指定方法　：　プロパティ名 | 時間 | 時間関数 | 遅延時間
例）　transition: opacity .4s ease-in-out 1s;
animation　→　2工程以上を指定する。
指定方法　：　プロパティ名 | 時間 | 繰り返し　| 時間関数
例）　animation: spin 3s infinite ease-in-out; 具体的には下記のように指定します。

CSS

      
    /* transition */
    .transition{
      opacity:1;
      -webkit-transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
      transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    .transition:hover {
      opacity: 0.5;
      -webkit-transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
      transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }

    /* animation */
    .animation {
      -webkit-animation: fuwafuwa 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
      animation: fuwafuwa 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    @-webkit-keyframes fuwafuwa {
      0% {
        -webkit-transform: translate(0, 0);
      }
      50% {
        -webkit-transform: translate(0, -20px);
      }
      100% {
        -webkit-transform: translate(0, 0);
      }
    }

    @keyframes fuwafuwa {
      0% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
      }
      50% {
        -webkit-transform: translate(0, -20px);
                transform: translate(0, -20px);
      }
      100% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
      }
    }
      
    

transitionは変化前と変化後の指定が必要ということがポイントです。上記DEMOのようにhoverして離した後も同じ変化をしないと不自然に見えるからです。プロパティなどの詳しい内容はこちら。 animationは、変化の工程ごとに指定してあげます。animationプロパティなどはこちら。