@keyframes
アニメーションの中間状態を定義するために使用する
アニメーションの開始から終了までの間の変化を指定できる
rnr: interpolateみたいな感じかmrsekut.icon
code:css
@keyframes animation-name {
0% {
/* 開始時のスタイル */
}
50% {
/* 中間時のスタイル */
}
100% {
/* 終了時のスタイル */
}
}
@keyframes name
nameはCSS: animationを適用する要素で使用される
%で特定のポイントでのstyleを指定する
from, toでもいい
fromは0%と同じ意味
toは100%と同じ意味
例
code:css
@keyframes colorChange {
0% {
background-color: blue;
}
100% {
background-color: red;
}
}
.element {
width: 100px;
height: 100px;
background-color: blue;
animation: colorChange 3s infinite;
}
.elementクラスに対してcolorChangeアニメーションを適用している
3秒かけて背景色を青→赤→青にするアニメーションを無限に繰り返す
例
code:css
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
50% {
transform: translateX(100px) rotate(180deg);
}
100% {
transform: translateX(0) rotate(360deg);
}
}
.element {
width: 100px;
height: 100px;
background-color: green;
animation: moveAndRotate 4s ease-in-out infinite;
}
要素が水平に移動しながら回転するアニメーションの定義
4sで1サイクルが終わり、無限に繰り返される