定义一个动画
@keyframes animationname {
keyframes-selector {css-styles;}
}
值 | 说明 |
---|---|
animationname | 动画名称 |
keyframes-selector | 0-100%;from (和0%相同);to (和100%相同) |
css-styles | 一个或多个合法的CSS样式属性 |
在某个元素上使用动画
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 | 说明 |
---|---|
name | 指定要绑定到选择器的关键帧的名称 |
duration | 动画指定需要多少秒或毫秒完成 |
timing-function | 设置动画将如何完成一个周期 |
delay | 设置动画在启动前的延迟间隔。 |
iteration-count | 定义动画的播放次数。 |
direction | 指定是否应该轮流反向播放动画。 |
fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 |
play-state | 指定动画是否正在运行或已暂停。 |