定义动画:
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
调用:
animation: 动画名称 持续时间;
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
(1)动画名称:,animation-name: move;
(2)执行一次动画的持续时间:animation-duration: 4s;
备注:上面两个属性,是必选项,且顺序固定。
(3)动画的执行次数: animation-iteration-count: 1; //iteration的含义表示迭代
属性值infinite表示无数次。
(3)动画的方向:animation-direction: alternate;
属性值:normal 正常,alternate 反向。
(4)动画延迟执行:animation-delay: 1s;
(5)设置动画结束时,盒子的状态:animation-fill-mode: forwards;
属性值: forwards:保持动画结束后的状态(默认), backwards:动画结束后回到最初的状态。
(6)运动曲线: animation-timing-function: ease-in;
属性值可以是:linear ease-in-out steps()等。
注意,如果把属性值写成steps(),则表示动画不是连续执行,而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。
//api介绍结束
div {
width:3px;
height:200px;
background-color: #000;
margin:100px auto;
transform-origin: center bottom;
animation:clock 60s steps(60) infinite;
}
@keyframes clock{
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
//摇摆的时钟