- 动画属性名
- 动画持续时间
- 动画延迟时间
- 动画速度曲线 linear匀速
-
infinite循环
-
alternate 动画轮流反向播放
-
动画状态 paused/running
方向播放可以这么替代
@keyframes changediv {
0% {
width: 100px;
height: 100px;
background-color: tomato;
}
50% {
width: 300px;
height: 300px;
background-color: gold;
}
100% {
width: 100px;
height: 100px;
background-color: tomato;
}
}
div {
width: 100px;
height: 100px;
background-color: tomato;
animation: changediv 10s 1s linear infinite;
}