css3动画及animation在react框架的运用

学习资料：菜鸟教程；http://www.runoob.com/css3/css3-animations.html；

原文: http://www.w3cplus.com/content/css3-animation © w3cplus.com； http://www.w3cplus.com/content/css3-transition © w3cplus.com；

如何创建动画：
@keyframes 动画名(logo) {
           from {}
            to{}

}
选择器中调用：
.logo{
      animation:logo 2s(时间)

}
见实例：



像上面一个简单的动画效果创建好啦；
其实可以运用百分比进行调用；像from可以看做起点0%，to看作100%；
请看百分比案列：



在这中间我得为大家介绍动画如何在react中完成滑入滑出的效果；
先给出初始样式； .anchor-person{//直播video样式
width: 112px;
height: 334px/3px+0px;
background-color: red;
margin: auto;
}再写一个滑出的动画@keyframes disappear {
0%{
width: 112px;
}
25%{
width: 84px;
}
50%{
width: 56px;
}
75%{
width: 28px;
}
100%{
width: 0px;
}
}再进行调用动画；.anchor-disappear{
width: 0px;
overflow: hidden;
animation: disappear .3s linear;
}
再写出现的动画；@keyframes arise{
0%{
width: 0px;
}
25%{
width: 28px;
}
50%{
width: 56px;
}
75%{
width: 84px;
}
100%{
width: 112px;
}
}调用： .anchor-arise{
width: 112px;
overflow: hidden;
animation: arise .3s linear;
}关键如何使得动画其作用，关键对react的运用;
先给一个动画类名出现的判断标，再点击时运用简单的逻辑，就能达到jq中toggle方法的动画效果； this.state={
anchorFlag:true
}
liveAnchor(){
if(this.state.anchorFlag){
this.refs.anchorV.className='anchor-person anchor-disappear';
this.setState({
anchorFlag:false
})
}else{
this.refs.anchorV.className = 'anchor-person anchor-arise';
this.setState({
anchorFlag:true
})
}

}liveAnchor属于点击函数，通过ref的虚拟dom钩子获取div dom元素，并给该dom元素添加类名，根据anchorFlag的布尔值的设置，给该div添加不同的动画类名，从完成该动画效果；
按照上面的案例，大家应该会写一些简单的动画了吧，接下来讲解一下annimation的相关属性：
1.animation-name：none | IDENT[,none | IDENT]*;

none | IDENT[,none | IDENT]*;

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

none | IDENT[,none | IDENT]*;

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

none | IDENT[,none | IDENT]*;

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

none | IDENT[,none | IDENT]*;

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

none | IDENT[,none | IDENT]*;

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com规定 @keyframes 动画的名称。是复合属性animation的第一个值；
解释：
其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。
2.、animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。第二个参数；
3、animation-timing-function：规定动画的速度曲线。默认是 "ease"。

表示速度是匀速还不匀速等等状态值；

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-transition ©w3cplus.comease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
4.transition-delay: <time> [, <time>]*；
规定动画何时开始。默认是 0。

transition-delay ： <time> [, <time>]*

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-transition ©w3cplus.com

transition-delay ： <time> [, <time>]*

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-transition ©w3cplus.com

5.animation-iteration-count：规定动画被播放的次数。默认是 1。

animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.comanimation-iteration-count是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.comanimation-iteration-count是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。

6.animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.comanimation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放.

7.animation-play-state
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下（IE9以下不支持）。
总结：animation：[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> （播放次数）|| <animation-direction>（方向）] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

8.animation-fill-mode: none|forwards|backwards|both|initial|inherit
属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素；

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

案列：