CSS|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を利用したアニメーション