效果图:
如果没有animation-direction: alternate;属性的话, 那么每次完成动画帧, 就会立刻恢复到起始位置, 中间没有缓冲过程, 看起来就很生硬
- 所有代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
}
.ball {
width: 100px;
height: 100px;
background: orange;
border-radius: 50%;
animation: ball 2s infinite;
margin-left: 100px;
text-align: center;
line-height: 100px;
}
.ball2 {
/* 属性定义是否循环交替"反向"播放动画。 如果动画被设置为只播放一次，该属性将不起作用。*/
animation-direction: alternate;
}
@keyframes ball {
to {
transform: translateY(200px);
}
}
</style>
</head>
<body>
<div class="ball ball1">无</div>
<div class="ball ball2">有</div>
</body>
</html>animation-direction属性
normal | 默认值。动画按正常播放。 |
reverse | 动画反向播放。 |
alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 |
alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |