CSS 动画@keyframes规则
@keyframes规则
CSS中的@keyframes规则，可以用于指定动画的样式，即在该规则下，动画将在指定的时间内逐渐从当前样式转变为新的样式。要让动画生效，需要将@keyframes规则下的动画绑定到该元素。
语法
来源网络，仅供参考：
@keyframes animationName {
from {attribute:value;...}
to {attribute:value;...}
}
/*通过animation-name: animationName来绑定动画*/@keyframes规则实例代码，及在线编辑器
下方实例通过@keyframes规则设计了一个名为skyblue2blue的动画，然后将其绑定到一个div上来实现div背景颜色变化的动画：
<div id='d1'></div>
<style>
@keyframes skyblue2blue {
from {background-color:skyblue;}
to {background-color:blue;}
}
#d1{width:50%;height:50%;background-color:skyblue;animation-name:skyblue2blue;animation-duration:2s;}
</style>