css3 animation动画效果解析

css:

.first_animate{
width:100px;height: 100px;
-webkit-border-radius:50px;
position:relative;
background: red;
-webkit-animation:myfirst 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-delay:2s;
-webkit-animation-play-state:running;
-webkit-animation-timing-function:ease;
}
@-webkit-keyframes myfirst{
0% {background: red;left: 0;top:0;}
25% {background: black;left:200px;top:0;}
50% {background: blue;left:200px;top:200;}
75% {background: orange;left:0px;top:200;}
100% {background: green;left:0;top:0;}
}

html:

<div class="first_animate"></div>

电脑权限问题只能截个静态图。。

 

转载于:https://www.cnblogs.com/zhongfufen/p/4362691.html