1.基础运动 ：
transition:1s all ease 2s;
2高级运动：
@keyframes test{
from{}
to{}
}
@keyframes test{
0%{}
100%{}
}
animation:test linear 1s infinite;
animation-duration:1s; 运动时间
animation-name:test; 名字
animation-timing-function:linear; 运动形式
animation-iteration-count:2; 运动次数
infinite 无限次数
animation-delay:2s; 延迟执行
animation-play-state:paused; 暂停
eg：
<style>
@keyframes test{
0%{ left:0; }
50%{ left:200px; }
100%{ left:0px; }
}
div{ width:200px; height:200px; background:red; position:absolute; left:0; top:0; }
.on{ animation:test linear 1s infinite; }
</style>
</head>
<body>
<div class="on"></div>
</body>
网友评论