首先你要明白"@keyframes"是出自CSS3的animation属性的，这是一个关键帧动画。

• 首先你应该给你的动画写好一个框架，像这样：

div{                        //attr表示标签名，随便一个标签都可以
    animation-name: change;    //随便起一个名字
    animation-duration: 5s;    //这是过渡时间，即你的动画有多少秒
    animation-timing-function: linear;    //这是过渡方式，linear表示平滑的，还有其它的自行查找吧
}

• 接下来就是描述你的关键帧动画了

@keyframes change{    //如果是Chrome浏览器的话就是@-webkit-开头，Firefox就是@-moz-开头
    0%{
        backgound-color: red;    //我这里写了颜色的变化，想什么动画都可以随便写
    }
    50%{
        background-color: blue;
    }
    100%{
    background-color: yellow;
    }
}