flex布局（animation）

CSS3的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现更为复杂的动画。 
animation实现动画主要由两个部分组成： 
1. 通过@keyframes来声明一个动画 
2. 在animation属性中调用关键帧声明的动画

HTML：

<div class="box"></div>

CSS：

        body{background-color: #333;}.box{width: 100px;height: 100px;background-color: orangered;animation: move 4s ease 0s infinite;}@keyframes move {0%{transform: translateX(100px);}30%{transform: translateX(400px);}60%{transform: translateX(200px);}100%{transform: translateX(500px);}}

另外一种形式： 

@keyframes  move{//Name动画名称from{//等同于0%//样式代码}to{//等同于100%//样式代码}
}
@-webkit-keyframes  move{//Name动画名称from{//等同于0%//样式代码}to{//等同于100%//样式代码}
}{-webkit-animation: move 4s;animation: move 4s; 
}