1.@keyframes
- @keyframes 规则是创建动画。
- @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
2.写法
@keyframes my
{
from {background: red;}
to {background: yellow;}
}
div{
animation: my 5s;/*动画名称 动画时长*/
}
animation-name: 规定 @keyframes 动画的名称
animation-duration: 规定动画完成一个周期所花费的秒或毫秒,默认是 0
animation-timing-function: 规定动画的速度曲线，默认是 "ease"
animation-delay: 规定动画何时开始，默认是 0
animation-iteration-count: 规定动画被播放的次数，默认是 1
animation-direction: 规定动画是否在下一周期逆向地播放，默认是 "normal"。
animation-play-state: 规定动画是否正在运行或暂停，默认是 "running"。
网友评论