CSS3 动画

动画：动画同过渡有些相似，格式如下

div{
    animation:myfirst 5s;    /*动画名 持续时间*/
    -webkit-animation:myfirst 5s;  /*Safari 与 Chrome*/  
}

@keyframes myfirst    /*动画效果*/
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

多属性动画

@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 与 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;}
}

无线循环动画

div{
    animation: myfirst 5s infinite;
    -webkit-animation:myfirst 5s infinite;
}

 

 

 

来源：https://www.cnblogs.com/xihailong/p/11935632.html