CSS3 animationプロパティ

animationプロパティでアニメーション効果を演出することが可能です。似たものとしてtransitionプロパティが有りますが、animationプロパティのほうが細かい指定が可能です。

次のCSSはdivを1秒間に左右に移動させる無限ループです。

div {
        background-color: yellow;
        width:100px;
        height:50px;
        position: relative;
        animation: hunabasi 1s infinite;
}

@keyframes hunabasi {
        0% {
                left:0;
                top:0;
        }
        50% {
                top:0px;
                left:500px;
        }
        100% {
                top:0;
                left:0;
        }
}

まず最初に@keyframesに動作を記述します。0%~100%の間に座標を書き込み、名前をつけます。上の例ではhunabasi。次はanimationプロパティに「@keyframesでつけた名前」「@keyframesの実行時間」「リピート回数」（その他値）を指定します。

表示結果はこうなります。（モダンブラウザのみ）
なかなかクレイジーなアニメーションができたんじゃないでしょうか。

次は文字を回転させてみます。

p {
  width: 100px;
  animation: nasijiru 3s 3 linear;
}

@keyframes nasijiru {
  100% { transform: rotate(360deg); }
}

pを３秒間で３回転させます。linearは一定速度で動かすという意味の値です。linearの他にease自然な、ease-inゆっくり始まる、ease-outゆっくり終わる、ease-in-outなどがあります。

表示結果