3D

说到动画，不得不提及

@keyframes move，动画使元素逐渐从一种样式变为另一种样式，就必须首先为动画指定一些关键帧

@keyframes 规则

要使动画生效，必须将动画绑定到某个元素。

animation-duration 属性定义需要多长时间才能完成动画。

如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

 

动画完成 25％，完成 50％ 以及动画完成 100％

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

应用的元素
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
animation

linear 4s 页面开始前往后4秒，就开始执行 

ease-in-out 缓入缓出 

linear  匀速转动

infinite 永远转动 和上面的linear ease-in-out linear 4s要写一块

transform-origin: 50% 0; 绕改变中心点得位置进行旋转，一旦写上了transform-origin，就从（0，0）旋转开始 

move 2s 是指一个动作完成需要2s