- HOME
- > BLOG CATEGORY
- 【CSS】@keyframesの使い方アニメーションの動きを指定する

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
@keyframes
プロパティについて学びたい方へ今回は、@keyframesに関する記事になります。
@keyframesとは、アニメーションの動きとタイミングを指定する際に使います。
また、@keyframesを指定する際に、必須となってくる、「animation」プロパティも覚えていきましょう!
[記事の内容]
@keyframes
プロパティとは、アニメーションの動きとタイミングを指定する際に使います。
@keyframesを指定する際に、「animation-name」、「animation-duration」プロパティが必須
になってきます。
書き方は以下のようになります。
/*--@keyframes--*/
@keyframes アニメーション名 {
0% {
値;
}
100% {
値;
}
}
要素 {
animation-name: アニメーション名;
animation-duration: 時間(値);
}
animation-name
とは、要素にアニメーション名を指定します。
animation-nameプロパティとは、アニメーションを適用する要素に名前を指定します。
「@keyframes アニメーション名」と同じアニメーション名を指定します。
カンマ(,)で区切って複数の指定も可能です。
animation-duration
とは、アニメーションの1回分の時間を指定します。
animation-durationプロパティとは、アニメーションが開始されてから終了するまでの1回分の時間を
指定します。
@keyframesでの指定できる値、「%」、「from、to」での指定を解説していきます。
今回は、開始の指定を0%の場合は、「width:0」、終了の指定は100%の場合は「width:100%」になっております。また、アニメーションが分かりやすいように、「count 実行回数」の指定もしております。
共通部分である、アニメーションの1回分の時間は「duration: 3s」3秒になっております。
「赤色 name(animation-sample)」では、「0%から100%」までの「width」の指定をしております。
「黄色 name(animation-sample01)」では、「from(0%)からto(100%)」までの「width」の指定をしております。
@keyframesでの指定
<!--赤色 box-->
<div class="animation animation-box">%での指定</div>
<!--黄色 box-->
<div class="animation-01 animation-box">fromでの指定</div>
/*--共通 CSS--*/
.animation-box {
width: 120px;
height: 100px;
line-height: 100px;
color: #333;
text-indent: 10px;
}
/*--赤色 box--*/
.animation {
background-color: #fd6158;
animation-name: animation-sample; /*--アニメーション名--*/
animation-duration: 3s; /*--時間--*/
animation-iteration-count: infinite; /*--実行回数--*/
}
@keyframes animation-sample {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/*--黄色 box--*/
.animation-01 {
background-color: #febe3e;
animation-name: animation-sample01; /*--アニメーション名--*/
animation-duration: 3s; /*--時間--*/
animation-iteration-count: infinite; /*--実行回数--*/
}
@keyframes animation-sample01 {
from {
width: 0;
}
to {
width: 100%;
}
}
前回は0%から100%の間のアニメーションでしたが、
中間に50%を入れ、さらにCSSを適用させています。
「0%→25%→50%→75%→100%」と細かく指定も可能になります。
背景色の指定
<!--赤色 box-->
<div class="animation-02 animation-box">背景色の指定</div>
/*--共通 CSS--*/
.animation-box {
/*--省略--*/
}
/*--赤色 box--*/
.animation-02 {
background-color: #fd6158;
animation-name: animation-sample02; /*--アニメーション名--*/
animation-duration: 3s; /*--時間--*/
animation-iteration-count: infinite; /*--実行回数--*/
}
@keyframes animation-sample02 {
0% {
background-color: #fd6158;
}
50% {
background-color: #FD8F58;
}
100% {
background-color: #F86015;
}
}
transform(rotate 回転)との組み合わせになります。また、「transform-origin: 50% 50%」と指定し画像の中心から回転するように指定しています。
※transform、transform-originに関しては下記に関連記事を載せておきます。
rotate(0deg)からrotate(360deg)を指定する事で一回転を繰り返す(count、実行回数)指定をしています。
回転の指定
<!--画像-->
<div>
<img src="画像パス" alt="" class="animation-03">
</div>
/*--画像 CSS--*/
.animation-03 {
animation-name: animation-sample03;
animation-duration: 4s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
}
@keyframes animation-sample03 {
0% {
transform:rotate(0deg);
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(360deg)
}
}
【CSS】transformの使い方、要素を2Dに変形する!
transform(2D)では、「マトリクス変形」、「回転」、「拡大・縮小」、「傾斜」、「移動」についての指定
【CSS】transformの使い方、要素を3Dに変形する!
transform(3D)では、「マトリクス変形」、「回転」、「拡大・縮小」、「移動」、「遠近効果」についての指定
【CSS】transform-originの使い方、中心点(位置)を指定する!
transform-originとは、要素を2D、3Dに変形させる時の中心点(位置)を指定
【STEP02 CSS】animation-delayの使い方アニメーションの開始を指定する
animation-delayとは、アニメーションが開始するまでの時間を指定します。
【STEP03 CSS】animation-play-stateの使い方・再生状態を指定する
animation-play-stateとは、アニメーションが再生中か一時停止状態かを指定します。
【STEP04 CSS】animation-fill-modeの使い方・実行前後を指定する
animation-fill-modeとは、アニメーションの実行前後のスタイルを指定します。
【STEP05 CSS】animation-timing-functionの使い方・変化を指定する
animation-timing-functionとは、アニメーションの変化(速度)のスタイルを指定します。
【STEP06 CSS】animation-iteration-count・アニメーションの回数を指定する
animation-iteration-countとは、アニメーションの実行回数を指定します。
【STEP07 CSS】animation-directionの使い方・ 再生方向を指定する
animation-directionとは、アニメーションの再生方向を指定します
【STEP08 CSS】animationプロパティの一括指定!まとめ
今回はこれで以上です。
今回紹介したのは、一部になります。引き続きアニメーションの解説をした記事を書いていきます。
最後に紹介した、@keyframesはtransformとの組み合わせが多いです。
関連記事を読んでいただき理解しておくとよいでしょう。
次回は「アニメーションが開始するまでの時間」かについて解説します。
@keyframes
プロパティとは、アニメーションの動きとタイミングを指定する際に使います。animation-name
とは、要素にアニメーション名を指定します。animation-duration
とは、アニメーションの1回分の時間を指定します。animation-iteration-count
とは、アニメーションの実行回数を指定します。2025.01.11
2024.10.05
2024.05.15
2024.05.09
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog