css3定义动画@keyframes
程序员文章站
2024-03-24 20:51:34
...
启动动画
#demo {
animation-name: animation1; //启用动画的名称
animation-duration: 2s; //动画循环时间
animation-timing-function: linear; //一直循环
}
定义动画
@keyframes animation1{
0% {transform: translate(0); }
20% {transform: translate(120px); }
40% {transform: translate(240px); }
60% {transform: translate(240px, 40px); }
80% {transform: translate(240px, 80px); }
100% {transform: translate(240px, 120px); }
}