元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

CSSでアニメーションする方法

CSSでアニメーションする方法について書きます。まずは、簡単なホバー時の処理をご紹介します。次に、ホバー時の処理と他のプロパティを組み合わせてアニメーションしていきます。CSSだけでも凝ったアニメーションが作れるのではないでしょうか。

ホバー(マウスオーバー)時のアニメーション

ホバーした瞬間にプロパティの値を変えて、アニメーションさせます。:hoverに、変化の内容を指定します。

<div class="rect"></div>
.rect{
  width:100px;
  height:100px;
  background:#000000;
}

/* ホバー時に以下のスタイルが反映される */
.rect:hover{
  background:#aaaaaa;
}

transition(遷移)でアニメーション

  • transition+:hover

transitionと:hoverでアニメーションさせます。transitionは、一定時間かけて状態を遷移するプロパティです。一定時間かけて変化することでアニメーションさせます。アニメーションさせたい要素にtransitionを指定します。

<div id="rect1"></div>
#rect1{
  width:100px;
  height:100px;
  background:#000000;
  /* transition: transitionを適用するプロパティ 変化の時間 変化の開始時間 変化の具合 */
  transition: all 300ms 0s ease;
}

#rect1:hover{
  width:200px;
  background:#aaaaaa;
}

transform(変形)

  • transition+:hover+transform

transitionと:hoverにtransformを組み合わせて、アニメーションさせます。transformで回転、拡大縮小、傾斜、移動をすることができます。

<div id="rect2"></div>
#rect2{
  width:100px;
  height:100px;
  background:#000000;
  transition: all 300ms 0s ease;
}

#rect2:hover{
  background:#aaaaaa;
  transform: rotate(90deg); /* 90°回転する */
}

animationと@keyframesを利用したアニメーション

キーフレームアニメーション。キーフレームで細かく動きを指定します。

<div id="rect3"></div>
#rect3{
  width:100px;
  height:100px;
  background:#000000;
  animation: rotation 2s ease 0s infinite alternate none running;
}

@keyframes rotation{
  0%{
    transform:scale(.3);
  }
  50%{
    transform:scale(.6) rotate(-45deg);
    background: red;
  }
  100%{
    transform:scale(1) rotate(180deg);
    background: blue;
  }
}

まとめ

下記の順で「CSSでアニメーションする方法」を見てきました。

  • :hover(ホバー時の処理)
  • transition+:hover(ホバー時に一定時間かけて処理)
  • transition+:hover+transform(ホバー時に一定時間かけて処理し、変形処理も加える)
  • animationと@keyframesを利用したアニメーション