8.1 属性 animation-iteration-count
CSS 动画可以创建动态的视觉效果，从而改善用户界面。接下来我们来看看控制动画循环的两个关键属性：animation-iteration-count 和 animation-direction。
属性 animation-iteration-count 定义了动画要播放多少次。这个属性可以控制动画是播放一次、多次还是无限次。
语法：
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