下面的表格列出了 @keyframes 规则和所有动画属性：
@keyframes规定动画。
animation所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode规定对象动画时间之外的状态。
下面的两个例子设置了所有动画属性：
实例
运行名为 myfirst 的动画，其中设置了所有动画属性：
div
{
animation-name: myfirst
animation-duration: 5s
animation-timing-function: linear
animation-delay: 2s
animation-iteration-count: infinite
animation-direction: alternate
animation-play-state: running
/* Firefox: */
-moz-animation-name: myfirst
-moz-animation-duration: 5s
-moz-animation-timing-function: linear
-moz-animation-delay: 2s
-moz-animation-iteration-count: infinite
-moz-animation-direction: alternate
-moz-animation-play-state: running
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst
-webkit-animation-duration: 5s
-webkit-animation-timing-function: linear
-webkit-animation-delay: 2s
-webkit-animation-iteration-count: infinite
-webkit-animation-direction: alternate
-webkit-animation-play-state: running
/* Opera: */
-o-animation-name: myfirst
-o-animation-duration: 5s
-o-animation-timing-function: linear
-o-animation-delay: 2s
-o-animation-iteration-count: infinite
-o-animation-direction: alternate
-o-animation-play-state: running
}
中级：Css3中的帧动画
这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子，首先我们需要安装react-transition-group，输入
组件中引入CSSTransition模块：
一旦动画入场，插件将会自动的在包裹住的标签上添加很多css样式，默认class名是boss-text，所以我们需要给CSSTransition标签加上classNames='boss-text'，然后去css文件进行配置：
如果页面上一组dom都需要添加动画效果时我们需要在最外面再加一个TransitionGroup
