|
属性 |
描述 |
|||||||||||||||
|
@keyframes |
定义动画 |
|||||||||||||||
|
animation |
执行动画 |
|||||||||||||||
|
animation-name |
动画名称 |
|||||||||||||||
|
animation-duration |
执行完这个动画所需要花费的时间 单位是秒数 |
|||||||||||||||
|
animation-timing-function |
动画执行过程中的变化速度
|
|||||||||||||||
|
animation-delay |
延迟多久后执行动画 单位是秒数 ,只生效一次 |
|||||||||||||||
|
animation-iteration-count |
执行多少次动画 n（1,2,3,4...） infinite无穷，循环 |
|||||||||||||||
|
animation-direction |
动画下次的执行方向 |
|||||||||||||||
|
animation-play-state |
动画是否执行 |
|||||||||||||||
|
animation-fill-mode |
|
|||||||||||||||
语法①：两种状态，from代表初始状态，to代表最终转态
@keyframes 动画名称{
from{
}
to{
}
}
语法②：按百分比（0-100%）分割
@keyframes 动画名称{
0%{
}
20%{
}
40%{
}
60%{
}
80%{
}
100%{
}
}