1.定义动画轨迹
@keyframes 轨迹名称{
from{
//开始位置的样式
}
to{
//结束位置的样式
}
}
或者:
@keyframes 轨迹名称{
0%{}
50%{}
60%{}
100%{}
}
2.元素执行轨迹
div{
animation-name:轨迹名称
anmation-duration:m/ms动画持续时间
anmation-delay:m/ms动画延迟时间
anmation-iteration-count动画迭代次数
number
infinite无限循环
aniamtion-fill-mode:动画在执行前和执行后,如何将样式应用到目标上:forwards backwards
aniamtiom-timing-function:
ease
ease-in
ease-out
eas-in-out
linear
steps():
animaton-direction:
}
anmation-direction:动画运行完是否交替方向或者重置起点
reverse反转
altermate交替反转
altermate-reverse 与altermate类似,只是第一次播放时需要反转
animation-timing-function:
ease
ease-in
ease-out
ease-in-out
linear
steps(3)
实例:
呼吸灯:
1.外圆
1.扩大10px
2.缩小10px
3.保持不动
2.内圆
1.外圆扩大的同时,内圆缩小10px
2.外圆缩小的同时,内圆扩大10px
3.内圆缩小12px
4.内圆放大12px