CSSの初心者向けに@keyframesの基本をまとめてみた

CSSでアニメーションを学び始めた方向けに、@keyframesの基本事項をまとめてみました。

@keyframesは、基本的な考え方さえ理解できれば、割と簡単に細かなデザインを仕込むことが可能になりますね。

まずは基本中の基本としてまとめてみましたので、サイト構築中に「あれ？」などと曖昧になったときにでもこのサイトを振り返って見直してもらえればと思います。

なお、CSSのアニメーションの書き方そのものの基本をまとめたサイトも別にありますので、アニメーションに触れるのが本当に初めてという方は、まずはそちらの理解から始めることをおすすめします（タグメニューの「CSS」に総まとめ記事があります）。

では、順を追ってみていきましょう。

CSSの初心者向けに@keyframesの基本をまとめてみた

@keyframes

@keyframesは、変化前と変化後の途中に、任意のタイミングでキーとなるフレームを差し込む手法です。

@keyframeを差し込んでおいて、「animation」プロパティを使うことによって、より複雑にアニメーションを展開させることができるようになります。

アニメーションを始めた頃に学んだ「transition」と違うところは、設定したアニメーションを複数回繰り返したり、永遠に動作させたりすることが可能になる点にあります。

まずは具体例を以下のようにみてみましょう。

この設定を細かく解説すると以下のようになります。

まずは「@keyframes」の記述部分を切り取ってみます。

@keyframes go {
  0% {
    transform: none;
  }
  30% {
    transform: translate(200px, 300px) rotate(360deg) ;
  }
  100% {
    transform: translate(400px, 100px) rotate(360deg)  scale(0.4, 0.4);
  }
}

以上が@keyframeの設定についての説明になります。

では、続いてBOX1に対して当てた宣言を切り取ってみてみましょう。

.box1 {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

  animation-name: go;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

animationの一括指定

@keyframsでも、animationでプロパティを一括指定することができます。

.box1 {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

  animation-name: go;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

この記述を一括指定で書くと以下のようになります。

.box1 {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

  animation: go 3s forwards infinite
  alternate-reverse;
}

一括指定の際に気をつけるべき点は、transitionの場合とほぼ同じです。

@keyframesを使った例

CSSアニメーションによる表現の幅の広がりをもう少し例を挙げて見てみましょう。

回転するアイコン

ローディング中によくみられるようなアイコンを作ってみます。

.wakka {
  width: 80px;
  height: 80px;
  border: 10px dashed skyblue;
  border-bottom-color: transparent;
  border-radius: 50%;
}

これで、以下のようなボックスができますね。

このdiv要素で作った輪っかのような図形を、@keyframesを使って1回転するのに1秒、繰り返しをinfinite（無限）と指定すれば、以下のようになります。

ポップアップアニメーション

もう一つ、メニューが欄外から現れて、欄外に消えていくといったような効果を作ってみます。

.pyonpyon {
  width: 300px;
  text-align: center;
  padding: 8px 16px;
  background: skyblue;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 10px 8px 10px silver;
  position: fixed;
  top: 48px;
  left: 48px;
}

これで、以下のようなアイコン風のメニューができますね。

このdiv要素に@keyframesを使って、

• 徐々に縦方向に移動（translateY）
• 徐々に表示・非表示（visibility）
• 徐々に透明度の増減（opacity）

といった効果を3秒かけて実行、と指定すれば、以下のようになります。

まとめ

以上、CSSにおける@keyframes操作の基本について見てきました。

ここまで理解できたら、あとはバリエーションが無限に広がって、想像力を使ってWebデザインを楽しむことができますね。

皆さんのお役に立てれば幸いです！

自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！

併せて読みたい

» プログラミング関連記事

» ワードプレス関連記事