在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式
第二，声明过渡元素最终状态样式，比如悬浮状态
第三，在默认样式中通过添加过渡函数，添加一些不同的样式
CSS3的过渡transition属性是一个复合属性，主要包括以下几个子属性：
transition-property:指定过渡或动态模拟的css属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
transition-property: none | all | [ident]...
transition-duration: time
transition-timing-function: ease（速度逐渐变慢） | linear（恒速） | ease-in（加速状态，渐显效果） | ease-out（减速状态，渐隐效果） | ease-in-out（先加速再减速，渐显渐隐效果）
transition-delay: time
例子：
-webkit-transition:all .5s ease-in .2s;
transition:all .5s ease-in .2s;
keyframes介绍
keyframes被称为关键帧，其类似于flash中的关键帧，在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号{...} ，括号内就是一些不同时间段样式规则
如：
@-webkit-keyframes test{
0%{background:green;}
100%{background:red;}
}
还可以用 form to 实现上面效果
动画，主要包括下面几个子属性
调用动画animation-name属性主要是用来调用@keyframes定义好的动画。需要特别注意：animation-name调用的动画名需要和"@keyframes“定义的动画名完全一致，区分大小写
如调用上面例子定义好的动画
animation-name:test;
animation-name：调用动画animation-duration：设置动画播放时间
animation-timing-function：设置动画播放方式
animation-delay：设置动画开始播放时间
animation-iteration-count:infinite | <number> 设置动画播放次数:无限 | 设置次数
animation-play-state:running | paused 设置动画的播放状态
animation-direction:normal |alternate 设置动画播放方向 【注意：alternate，动画播放在第偶数次向前播放，第奇数次反方向播放】
animation-fill-mode：设置动画时间外属性，该属性定义在动画开始之前和结束之后发生的操作
补充：
animation-fill-mode:none | forwards | backwards | both
none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards：表示动画在结束后继续应用最后的关键帧的位置
backwards：会在向元素应用动画样式时迅速应用动画的初始帧
both：元素动画同时具有forwards和backwrads效果