- @keyframes 规则用于创建动画,并且必须 把它捆绑到某个选择器,否则不会产生动画效果。
- 您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。(动画的名称和时长这两个属性是动画必要的)
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;
-o-animation: myfirst 5s;
}
属性 | 描述 | 是否必要 |
---|
animation | 所有动画属性的简写属性,除了 animation-play-state 属性 | |
animation-name | 规定 @keyframes 动画的名称 | 必要 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 必要 |
animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | |
animation-delay | 规定动画何时开始。默认是 0。 | |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 | |
animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 | |
animation-fill-mode | 规定对象动画时间之外的状态。 | |
一: 点击添加animation动画效果
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)