CSS3によるアニメーション（簡単な例） [CSS3]

2014年に制作した記事を2016/08に加筆修正（2017/02追記）

js等を利用しなくてもcss3ではアニメーション表現ができます。
とっかかりとして、簡単な例を紹介します。

まず、css3でのアニメーションにはtransitionとanimationがあります。
transitionは時間的変化、animationはキーフレームアニメーションを表現します。

sample＜transition＞

ここにマウスオーバー

html

<div>ここにコンテンツ</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

サンプルのようにマウスオーバーイベントをきっかけ（トリガー）にして背景色やサイズなどを単純に変化させるだけであれば、複雑なタグを組まなくても実現できます。

css

div{
    width:100px;
    height:100px;
    padding:5px;
    background:#fc8;
    cursor:pointer;

    -webkit-transition-property: background,width;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function:ease-in-out;
    transition-property: background,width; /*transition効果を適用するCSSプロパティ名を指定*/
    transition-duration:0.5s; /*変化に掛かる時間を指定する*/
    transition-timing-function:ease-in-out; /*変化のタイミング・進行割合を指定する*/
}

div:hover{/*トリガー*/
    background:#8fc;
    width:150px;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. 2～6行目：変化させたい要素の背景色であるとか、幅・高さなどを適宜設定
  2. 11行目：変化させたいcssプロパティを指定（ここでは背景色と幅を変化させたいので、backgroundとwidthを指定してる）。複数指定するときは,（コンマ）で区切る
  3. 12行目：変化に必要な時間を指定（ここではマウスオーバーしてから0.5秒かけて変化させる）
  4. 13行目：変化の具合（一定の速度で変化するのか、初めはゆっくり変化するのかなど）を指定（ここでは0.5秒間の変化はゆっくり始まってゆっくり終わる）。
  5. 8〜10行目：11〜13行目と同じ（webkitのベンダープレフィックスを追加しているだけ）
  6. 16行目以降：マウスオーバー（正確にはhover）時の状態を設定

このほか、transition-delay（トリガーが発生してすぐ変化始まるのではなくて、タイミングをずらす）を設定することもできます。
また、トリガーはhoverに限りません。

イージングの指定方法
transition-timing-functionの値はキーワーだけでなく、cubic-bezierにして数値で指定することもできます。
cubic-bezier(数値, 数値, 数値, 数値)
3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

sample＜animation＞

読み込んだ時から動く

html

<div>ここにコンテンツ</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

サンプルのように背景色やサイズなどを単純に変化させるだけであれば、複雑なタグを組まなくても実現できます。

css

div{
    height:100px;
    padding:5px;

    -webkit-animation-name: anim;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction:alternate;
    animation-name: anim; /*アニメーションの名前を付ける*/
    animation-duration: 1.5s; /*アニメーションにかかる時間（複数回繰り返すなら1回分の時間）*/
    animation-timing-function: ease; /*アニメーションのタイミング・進行割合を指定する*/
    animation-iteration-count: infinite; /*アニメーションの繰り返し回数を指定する*/
    animation-direction:alternate; /*偶数回では逆方向の再生をさせる*/
}

@-webkit-keyframes anim {
    0% {width: 100px; background:#fc8;}
    100% {width: 150px; background:#8fc;}
}
@keyframes anim { /*animation-nameで設定した名前を指定*/
    0% {width: 100px; background:#fc8;}
    100% {width: 150px; background:#8fc;}
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. 2～3行目：アニメーションで変化させない設定
  2. 10行目：アニメーションの名前を付ける（あとで@keyframesで設定するときにこの名前が必要になる）
  3. 11行目：1回のアニメーションにかかる時間を設定
  4. 12行目：アニメーションのタイミング・進行割合を指定（一定の速度で変化するのか、初めはゆっくり変化するのかなど）
  5. 13行目：アニメーションの再生回数を指定。初期値は1。数値で回数を指定。infiniteは際限なし。
  6. 14行目：アニメーションを交互に反転再生させるかどうかを指定する（偶数回で逆方向のアニメーションをする）
  7. 21行目以降：どの時点でどのような変化をさせるかをキーフレームに記述。1回のアニメーションの時間内のどのあたりかを%で指定し、そこに向けて徐々にcssプロパティ値を変化させる。
  8. 5〜9行目および17〜20行目：10〜14行目および21行目以降と同じ（webkitのベンダープレフィックスを追加しているだけ）

このほかにanimation-play-state（再生中か一時停止かを指定する）、animation-delay（アニメーションがいつ始まるかを指定する）といった設定もできます。

戻る

Top