8.1 プロパティ animation-iteration-count
CSSアニメーションは、動的なビジュアル効果を作り出し、ユーザーインターフェースを向上させることができるよ。これから、アニメーションループを制御する2つの重要なプロパティ、animation-iteration-count と animation-directionを見ていくね。
animation-iteration-count プロパティは、アニメーションが何回再生されるかを決定するんだ。このプロパティを使うと、アニメーションが1回だけ再生されるのか、何回も再生されるのか、または無限に再生されるのかをコントロールできるよ。
構文:
element {
animation-iteration-count: number | infinite;
}
ここで:
number: アニメーションの再生回数 (例: 1, 2, 3, など)infinite: アニメーションが無限に再生される
例:
HTML
<div class="box"></div>
CSS
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
コードの説明:
@keyframes bounce: 要素を上に持ち上げて元の位置に戻すアニメーションを定義するよanimation-iteration-count: infinite: アニメーションを無限に再生するように設定するんだ
8.2 プロパティ animation-direction
animation-direction プロパティは、アニメーションの再生方向を決定するよ。アニメーションが正方向、逆方向、または両方向を交互に再生するのかを指定できるんだ。
構文:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
ここで:
normal: アニメーションは正方向に再生されるよ (デフォルト)reverse: アニメーションは逆方向に再生されるんだalternate: アニメーションは正方向と逆方向を交互に再生するよalternate-reverse: アニメーションは逆方向から始まり、正方向と逆方向を交互に再生するよ
例
正方向と逆方向の再生:
HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
コードの説明:
.box1: アニメーションは正方向に再生されるよ.box2: アニメーションは逆方向に再生されるんだ
方向の交互:
HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
コードの説明:
.box1: アニメーションは正方向と逆方向を交互に再生するよ.box2: アニメーションは逆方向から始まり、正方向と逆方向を交互に再生するんだ
8.3 両方のプロパティを使った例
揺れる要素
- この例は、右に左に揺れる要素を示しているよ:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>揺れる要素</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
@keyframes swing: 要素を回転させるアニメーションを定義するんだ.box:swingというアニメーションが適用された要素で、1秒の間に無限に再生され、逆方向から始まるプロパティが適用されているよ
GO TO FULL VERSION