@keyframes css3动画

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

多加浏览器的前缀 如  -webkit-  -moz-  -ms-  

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

@-webkit-keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

div{ 
　　animation: changecolor 5s ease 0.2s;　　　　　　//页面加载后动画自己执行

　　-webkit-animation: changecolor 5s ease 0.2s;　　

} 

div:hover{ animation: changecolor 5s ease 0.2s; } //hover 触发

animation: 动画名|动画运行时间|动画运行方式|延迟时间|动画播放的次数|是否反向播放动画;
animation-name:; 　　 //动画名，可自己定义但要与@keyframes 动画名{}对应；none位默认值，如果动画名为none将无动画效果
animation-duration:5s; 　　//运行时间,5秒
animation-timing-function:;　　//linear(匀速)、ease(默认，由快到慢)、ease-in(慢速开始，越来越快)、ease-out(快速开始，越来越慢)、ease-in-out(先加速、后减速)
animation-delay:0.8; 　　//动画延迟时间，延迟0.8秒多久开始
animation-iteration-count:3; 　　// 动画播放的次数，默认是1，可写具体的次数 或infinite(无限次播放)；
animation-direction:;　　// normal(默认)正常播放 ；alternate:动画轮流反向播放(要设置反向播放，播放次数至少是2次)
animation-fill-mode:;　　//寂寞填充，forwards(停留在动画结束位置)；backwards(停留在开始位置)