Animation用@keyframes去自定义一个变化过程 {}内部包含着动画变化的关键帧例如：
@-webkit-keyframes mycolor {
0%{
background-color: brown;
}
40%{
background-color: aqua;
}
70%{
background-color: #555555;
}
100%{
background-color: brown;
}
} 然后再根据相应的动作触发动画过程，比如hover，active等，animation和transition一样有三个子属性值，property，duration和timing-function
另外提一下，timing-function有5个值，linear，ease，ease-in，ease-out，ease-in-out；
linear：匀速变化；
ease-in：由慢到快；
ease-out：由快到慢；
ease和ease-in-out效果是一样的，都是由慢到快再到慢；
下载本文