作者:无奈中有几多Rudy | 来源:互联网 | 2023-09-23 09:12
用CSS3实现动画效果:@keyframes和animation共同实现。@keyframesmyfirst{from{background:red;}to{background:
用CSS3实现动画效果:
@keyframes和animation共同实现。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
绑定到div控件,设置绑定动画的名称和持续时长。
div{
animation:first 5s;
-webkit-animation:first 5s;
}
@keyframes |
规定动画。 |
3 |
animation |
所有动画属性的简写属性,除了 animation-play-state 属性。 |
3 |
animation-name |
规定 @keyframes 动画的名称。 |
3 |
animation-duration |
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
3 |
animation-timing-function |
规定动画的速度曲线。默认是 "ease"。 |
3 |
animation-delay |
规定动画何时开始。默认是 0。 |
3 |
animation-iteration-count |
规定动画被播放的次数。默认是 1。 |
3 |
animation-direction |
规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
3 |
animation-play-state |
规定动画是否正在运行或暂停。默认是 "running"。 |
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
前端动画效果的实现