<style>
.it{
list-style:none
}
.it li{
float:none
width:50px
height:30px
position:relative
margin-right:10px
}
.it li ul{
display:none
position:absolute
top:30px
left:0px
}
.it li a{
display:block
text-decoration:none
}
@keyframes itjob{
display:block
}
.it li a:hover ul{
animation:itjob 2s
}
</style>
html:
<div class="div1">
<ul class="it">
<li><a href="#">远标培训1</a></li>
<li>
<a>
<ul>
<li><a href="#">远标培训2</a></li>
</ul>
</a>
</li>
<li><a href="#">远标培训3</a></li>
</ul>
</div>
中级：Css3中的帧动画
这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子，首先我们需要安装react-transition-group，输入
组件中引入CSSTransition模块：
一旦动画入场，插件将会自动的在包裹住的标签上添加很多css样式，默认class名是boss-text，所以我们需要给CSSTransition标签加上classNames='boss-text'，然后去css文件进行配置：
如果页面上一组dom都需要添加动画效果时我们需要在最外面再加一个TransitionGroup
jQuery的可以实现：1.fadeIn（速度，[回调]）通过改变所有匹配元素的不透明度来实现淡入效果，并在动画可选地触发一个回调函数后完成。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或
回调（功能）：（可选）（可选）例如600毫秒缓慢淡入一段
代码：$（“P”）淡入（“慢“）
用200毫秒快速褪色的段落，然后会弹出一个对话框jQuery代码：。“动画完成”$（“P”）淡入（“快”，函数（）{
警报（ ）
}）
2.fadeOut（速度，[回调]）通过改变不透明度来实现所有匹配淡入淡出效果的元素，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或
回调（功能）：（可选）功能例如与段落600毫秒缓慢褪色
代码：$（“P”）。淡出（“慢”）
200毫秒段对话
代码后迅速褪色。 $（“P”）淡出（“快”，函数（）{
警报（“动画完成。”）
}）
3.fadeTo（速度，透明度，[回调]），所有匹配的元素逐步调整到指定的不透明度，并可选地触发一个回调函数完成动画后的不透明度。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：表示动画或
不透明度（：三种预定速度弦长的毫秒值（1000例）（“慢”，“正常”或“快速”）之一号）：调整0和1）的回调（功能）之间的不透明度值（数。 （可选）功能 600毫秒，以缓慢调整到0.66段，能见度的透明度有关的
码2/3。 $（“p”）的fadeTo（“慢”，0.66）$（“P”）。fadeTo（“慢”，0.66）
同款200毫秒快速调整到0.25，能见度约1/4的透明度，然后会弹出一个对话框jQuery代码：$（“P”）。 fadeTo（“快”，0.25，函数（）{
警报（）“动画完成。”
}）
