スポンサーサイト

/ スポンサー広告 / Comment[-]

CSS3 animationプロパティ

/ HTML5/CSS3/jQuery / Comment[0]
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

表示結果

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可