@keyframes について

投稿日: 2021年 4月 20日

ブログにハンバーガーメニューをつけようと js や css を書いていたときに、アニメーションでよく使われる @keyframes の使い方がよくわからず、つまりました。

考えてみると、@keyframes について全然調べたこともなかったので、ちょっと調べました。

@keyframes とは

mdn を見ると、

アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します

とあり、下記のように、いわゆる中間地点を定義出来ます。

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

これは、一連の CSS アニメーションにおけるある中間地点でのスタイルを定義しているだけなので、この keyframes のアニメーションを使うには、 mymove を animation のプロパティとして設定してあげる必要があります。

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 1s infinite; /* mymove を使って1秒間のサイクルで無限にアニメーションさせる */
}

上の keyframes と div のスタイルを使うと、バウンドのようなアニメーションになります。

少し応用

from, to キーワードが使える

@keyframes mymove {
  from {top: 0px;}
  to   {top: 1000px;}
}
@keyframes mymove {
  0%   {top: 0px;}
  100% {top: 1000px;}
}

from, to を使うと、0% から 100% で定義した場合と同義です。

複数のプロパティにアニメーションを適用する

@keyframes movesquare {
  0%   {top: 0px;   right: 0px;   }
  25%  {top: 0px;   right: 100px; }
  50%  {top: 100px; right: 100px; background: pink; width: 20px;}
  75%  {top: 100px; right: 0px;   }
  100% {top: 0px;   right: 0px;   }
}
  • top と right により、要素が四角に沿って動く
  • アニメーションの中間(50%) に 背景色と、要素の幅が変わり、最後にもとにもどる

プログラミングに関するオススメ書籍