こんにちは、素人エンジニアです。
cssでアニメーションを設定する方法を紹介します！
animationと@keyframesを使って動きや変化のあるデザインを作りましょう。
CSSアニメーションのサンプル
どきどきハートです。
@keyframes beat {
0% {
transform: rotate(45deg) scale(1,1);
}
10% {
transform: rotate(45deg) scale(0.6,0.6);
}
30% {
transform: rotate(45deg) scale(1,1);
}
100% {
transform: rotate(45deg) scale(1,1);
}
}animation: 2s ease-out 0s infinite running beat;ハートの作り方については、こちらの記事をご覧ください。
CSSアニメーションの作り方
CSSでアニメーションを作るには、@keyframesとanimationを設定します。
- @keyframes：アニメーションの開始から終了までの動きを設定
- animation：アニメーションの継続時間や実行回数などをまとめて設定
まずは、@keyframesについて見ていきましょう
@keyframesについて
@keyframesはこのように記述します。
@keyframes 名前 {
0% {
cssプロパティ: 設定値；
}
100% {
cssプロパティ: 設定値；
}
}名前は任意に付けられます。動きに適した名前を付けましょう！
アニメーションの動きや変化は、経過をパーセント（％）で区切って指定します。
- アニメーションの開始：0%
- アニメーションの終了：100%
0%から100%のアニメーションにする場合は、fromとtoでも指定できます。
例えば、要素をフェードアウト（透明に）したいときは、このように設定します。
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}animationについて
@keyframesで指定したアニメーションは、animationを設定することで適用されます。
animationプロパティでは、次のパラメタを指定できます。
- animation-name：@keyframesアニメーションの名前
- animation-duration：1回のアニメーションが終わるまでの時間
- animation-timing-function：アニメーションのタイミング・進行割合
- animation-delay：いつ開始するか（遅延時間）
- animation-iteration-count：アニメーション再生回数
- animation-direction：アニメーションの再生方向（順方向、逆方向など）
- animation-play-state：停止中か実行中か
- animation-fill-mode：アニメーション実行前後のスタイル適用について設定
必要なパラメタをピックアップして、animationで指定しましょう。
例として、サンプルの設定を見てみましょう。
animation: 2s ease-out 0s infinite running beat;- animation-duration：2s（２秒）
- animation-timing-function：ease-out（終わりがゆっくり）
- animation-delay：0s（遅延なし）
- animation-iteration-count：infinite（再生回数無限）
- animation-play-state：running（実行中）
- animation-name：beat（名前）
指定していないものは、初期値が適用されています。
このようにして、@keyframesアニメーションを適用させます。
いずれ、各パラメタの詳細についてもまとめますので、お待ちください。
以上！
コメント