CSSアニメーションのtransitionとanimation

HTML/CSS

CSSのアニメーションには「transition」と「animation」の二つの方法があります。

transitionとanimationの違い、そして一緒に使う機会が多い「transform」について簡単に整理しました。

transition

transitionはマウスオーバーなどで要素のCSSプロパティが変化した時に、アニメーション効果をつけるものです。

変化させたい要素にtransitionプロパティを付与し、アニメーション効果をつけるプロパティや、アニメーション時間などを設定します。要素のプロパティ値が変化すると、transitionの設定に基づいてアニメーションしながら変化します。

transitionプロパティ

transition-property: <アニメーションさせるプロパティ>;
transition-duration: <アニメーション にかける時間>;
transition-timing-function: <イージング>;
transition-delay: <アニメーション を開始するまでの時間>;
/* ショートハンド */
transition: property duration timing-function delay (, property duration ... );

変化後のプロパティ値は「:hover」などの疑似要素や、Javascriptで付加するクラスなどに指定します。効果は「変化前→変化後」はもちろん「変化後→変化前」のように双方向に適用されます。

注意点

変化前の要素にtransitionプロパティをつけた場合は、戻る場合も指定した時間をかけて元の状態に戻ります。変化後の要素にtransitionプロパティをつけた場合は、transitionプロパティが外れた瞬間に元の状態に戻ります。

使用例

.box {
    width: 200px;
    height: 200px;
    background-color: #faa;
    /* widthを3秒、background-colorを6秒かけて変化させる */
    transition: width 3s ease, background-color 6s ease;
}
/* マウスオーバーでアニメーションをさせる */
.box:hover {
    width: 400px;
    background-color: #aaf;
}

animation

動き方を細かく指定することにより、transitionよりも複雑な表現ができます。具体的な動きを定義する「@keyframes」と、keyframesで定義したアニメーションをどのように扱うかを設定する「animation」プロパティの2つが必要になります。

@keyframesルール

進捗率は「百分率」もしくは「form」と「to」で指定します。formは0%、toは100%と同じ意味です。

@keyframes <アニメーション名> {
    <進捗率> { <変化させるプロパティ>: <プロパティの値>; }
    <進捗率> { <変化させるプロパティ>: <プロパティの値>; }
    <進捗率> { <変化させるプロパティ>: <プロパティの値>; }
   /* 以下続く... */
}

animationプロパティ

animation-name: <@keyframeルールで設定したアニメーション名>;
animation-duration: <アニメーション にかける時間>;
animation-timing-function: <イージング>;
animation-delay: <アニメーション を開始するまでの時間>;
animation-iteration-count: <アニメーションの繰り返し回数>; /* infiniteで無限に繰り返す */
animation-direction: <アニメーションの繰り返し方法>; /* normal は0→50→100→0 ... のループ、alternateは0→50→100→50→0 ... のループ */
animation-fill-mode: <アニメーション前後の処理>; /* none / forwards / backwards / both */
animation-play-state: <アニメーションの実行または一時停止>; /* runningで実行、pausedで一時停止 */
/* ショートハンド */
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

アニメーションをさせたい要素にanimationプロパティを加え、animation-nameの値に@keyframesで定義したアニメーションを指定します。その他のanimetionプロパティも適宜設定します。

使用例

/* my-animationを定義 */
@keyframes my-animation {
    0% { width: 200px; }
    50% { width: 400px; height: 200px; }
    100% { width: 400px; height: 400px; }
}
.box {
    width: 200px;
    height: 200px;
    background-color: #faa;
    /* @keyframesで定義したアニメーションの指定と動作設定 */
    animation: my-animation 3s linear 0s infinite alternate none paused;
}
/* マウスオーバーでアニメーションをさせる */
.box:hover {
     animation-play-state: running;
}

注意点

animetionプロパティを使ったアニメーションは、ループを使う場合を除いて基本的には一方通行です。変化後の状態から変化前の状態へアニメーションをさせながら戻したい場合は、逆方向のアニメーションを定義する必要があります。

一緒によく使うtransform

transformプロパティは要素の大きさや位置、傾きなどを変化させるプロパティです。CSSアニメーションには必須のものではありませんが、同時に使われることが多いので覚えておくと便利です。

transformでできること

  • 変形させる
  • 大きさを変える
  • 位置を変える
  • 回転させる
  • 遠近効果をつける

などなど。

回転や遠近効果などは他のCSSプロパティでは代用できないので、transformを使うことによりさらに多様な表現ができるようになります。

コメント