@keyframes
アニメーションの中間状態を定義するために使用する
アニメーションの開始から終了までの間の変化を指定できる
rnr: interpolateみたいな感じか
css@keyframes animation-name {
0% {
/* 開始時のスタイル */
}
50% {
/* 中間時のスタイル */
}
100% {
/* 終了時のスタイル */
}
} @keyframes name name はCSS: animationを適用する要素で使用される % で特定のポイントでのstyleを指定する from , to でもいい from は 0% と同じ意味 to は 100% と同じ意味例
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秒かけて背景色を青→赤→青にするアニメーションを無限に繰り返す
例
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サイクルが終わり、無限に繰り返される