【初心者向け】CSSのkeyframesとanimationでアニメーションを実装する方法！
「アニメーションを利用して要素の動きを変えたい」
「keyframesの使い方がよくわからない」
上記のように悩んでいる方もいるのではないでしょうか。
初めてkeyframesを触る方からすると、アニメーションが作られている仕組みを理解するのが難しいですよね。
今回WEBCAMP MEDIAでは、CSSのkeyframesとanimationでアニメーションを実装する方法について解説します。
- keyframesとanimationについて
- アニメーションの作り方
- keyframesを複数指定するには
以上の項目について解説します。
この記事を読むことで、CSSのkeyframesとanimationの使い方を理解して、簡単なアニメーションを実装できるようになります。
CSSを使って要素に動きを加えたいと考えている方は、ぜひチェックしてみてくださいね！
CSSのkeyframesとanimationの特徴
CSSのkeyframesとanimationでアニメーションを実装するために、それぞれの特徴について解説します。
keyframesとは
keyframesはCSSプロパティの一種で、要素に指定したいアニメーションの動きを指定できます。
アニメーションの開始地点を0%、終了地点を100%として、その間でどのような動きを表現するのか詳細に設定できます。
keyframesの入力方法は下記の通りです。
@keyframes アニメーションの名前 {
0% {
プロパティ名; 値;
}
50% {
プロパティ名; 値;
}
100% {
プロパティ名; 値;
}
}上記のように、0%から100%の間に50%と入れて、アニメーションの実行過程で動きを変えることができます。
animationとは
animationは、@keyframesで指定したアニメーションを要素に指定するCSSプロパティです。
animationプロパティでは、主に下記項目の内容を指定できます。
- animation-name：アニメーションの名前
- animation-duration：アニメーションのスピード
- animation-direction：アニメーションの再生方向
- animation-timing-function：アニメーションの加速度
また、上記のプロパティはanimationプロパティに一括して入力することも可能です。
animation:アニメーション名 スピード 加速度 ;上記のように、半角空白で区切って複数指定します。入力する順番は決まっていませんが、アニメーション名を最初の値として設定するとわかりやすいでしょう。
CSSのkeyframesとanimationでアニメーションを作る方法
keyframesとanimationを使ってHTML要素にアニメーションを実装する方法について、サンプルコードを用いて解説します。
サンプルコード
HTML
<body>
<p class="test">テスト</p>
</body>CSS
@keyframes animation-test{
0%{
width: 50px;
}
100%{
width: 500px;
}
}
.test{
animation: animation-test 2s ease-in;
width:500px;
background-color: aqua;
}上記コードでは、実装するアニメーションに「animation-test」という名前をつけています。
アニメーションの詳細は、testクラスを50pxから500pxの位置まで2秒間で表示するという内容です。
animationプロパティにease-inは、ゆっくり動き出して終了位置に近づくにつれて加速する動きになります。
実行結果
ひとつの要素に複数keyframesを指定する方法
keyframesを複数指定するときは、animationプロパティに指定する際、カンマで区切って処理を分けることで利用できます。
keyframesを指定する方法について、サンプルコードで詳しく解説します。
サンプルコード
HTML
<body>
<p class="test">テスト</p>
</body>CSS
@keyframes animation-color{
0%{
background-color:rgb(72, 235, 235);
}
50%{
background-color:rgb(201, 243, 51);
}
75%{
background-color:rgb(236, 98, 98);
}
}
@keyframes animation-direction{
100%{
transform: translateX(500px);
}
}
.test{
animation: animation-color 5s,
animation-direction 5s;
width:300px;
height:300px;
background-color:rgb(72, 235, 235);
}keyframesでは、5秒間で水平方向へ500px移動するアニメーションと、5秒間で背景色が変わるという2つのアニメーションを作成しています。
それぞれの名前と実行する内容をanimationプロパティに指定してカンマで区切ることで、ひとつの要素に複数のアニメーションを実装しています。
実行結果
まとめ
今回は、CSSのkeyframesとanimationでアニメーションを実装する方法について解説しましたが、いかがでしたでしょうか？
アニメーションを実装するには、keyframesでアニメーションの内容を作ってanimationで要素へ指定します。
keyframesで作ったアニメーションは、animationにカンマで区切って入力することで複数指定できます。
ぜひ参考にしてみてくださいね！
