一、transition过渡动画

 

　　当元素的样式从一种状态变成另一种状态的时候，产生平滑的过渡效果。

 

　　注意：transition只能在两种不同的状态之间产生过渡动画，不能有两种以上的状态，这和animation动画不一样，所以论武力值，transition只能算阉割版的animation。

 

　　可以把第一个状态表示为初始值。第二个状态表示为结束值。

 

　　比如颜色从黑色变成白色，宽度从100px变成200px，透明度从1变成0.5等等，这都属于一个样式状态的变化。

 

　　所以要对一个元素做过渡动画，必须有两个要素要满足：

 

　　1、哪个对象要做动画。

 

　　2、动画要执行多长时间。因为默认值是0，所以必须设置运动的时长。

 

　　什么时候开始执行动画呢？那就是当样式的值发生改变的时候，最初级的运用就是利用:hover伪类来实现效果。

 

　　因为兼容性的问题，低版本浏览器请加上前缀。a{

 

　　color:#333;

 

　　-moz-transition:?.2s;

 

　　-webkit-transition:?.2s;

 

　　-o-transition:?.2s;

 

　　transition:.2s;?

 

　　}

 

　　a:hover{

 

　　color:#F78500;

 

　　}

 

　　二、transition的属性transition-property ? 执行过渡动画的样式属性，默认值为all。

 

　　transition-delay ? 延迟多少时间执行过渡动画，默认值0。

 

　　transition-duration ? 执行过渡动画花费的时间，默认值为0。

 

　　transition-timing-function ?动画执行的加减速贝塞尔曲线。默认值为ease。

 

　　1、transition-property支持的属性。

 

　　能够用具体的数字类的值表示的属性。不是所有的css属性都可以执行动画的，比如display就不可以，而visibility就可以。

 

　　width、height大小类的属性，color类的属性(background-color/border-color/color等)，margin、padding边距类的属性，position定位类的属性(left、top、background-position等),以及z-index/text-shadow/text-indent/opacity/visibility/transform等。

 

　　2、transition-timing-function 时间曲线。

 

　　这个属性非常的强大，单独拿出一篇文章来讲解都不为过。数学好的人应该都能记住贝塞尔曲线。在这里用贝塞尔曲线来表示运动的加减速等规律。

 

　　我们常用的也就是ease-in/ease-out/linear等值。其实，它的语法规则可以有那么多↓

 

　　transition-timing-function:?ease;

 

　　transition-timing-function:?ease-in;

 

　　transition-timing-function:?ease-out;

 

　　transition-timing-function:?ease-in-out;

 

　　transition-timing-function:?linear;

 

　　transition-timing-function:?step-start;

 

　　transition-timing-function:?step-end;

 

　　transition-timing-function:?steps(4,?end);

 

　　transition-timing-function:?cubic-bezier(0.1,?0.7,?1.0,?0.1);

 

　　transition-timing-function:?frames(10);

 

　　transition-timing-function:?ease,?step-start,?cubic-bezier(0.1,?0.7,?1.0,?0.1);

 

　　transition-timing-function:?inherit;

 

　　transition-timing-function:?initial;

 

　　transition-timing-function:?unset;

 

　　运动速度的变化很微妙，通过直观的在线效果更好理解，可以用这个在线工具直观的查看各种不同曲线产生的效果。

 

　　还有在线生成transition动画代码的工具，真的是懒人福音。

 

　　三、案例

 

　　1、鼠标经过颜色的变化

 

　　See the Pen transition过渡动画案例1 by zhaolanzhen (@mrszhao) on CodePen.

 

　　2、鼠标经过显示和隐藏，结构有嵌套关系的下拉菜单，这个案例就利用了visibility和opacity结合完成显示和隐藏的效果，而用display:none就不可以。

 

　　See the Pen transition过渡动画案例2 by zhaolanzhen (@mrszhao) on CodePen.

 

　　3、鼠标经过显示和隐藏，结构没有嵌套关系，用纯CSS实现的话，鼠标移开下面的对象也会消失，不能像下拉菜单那样还能把鼠标移到下面的元素上。

 

　　See the Pen transition过渡动画案例3 by zhaolanzhen (@mrszhao) on CodePen.

 

　　4、鼠标经过显示和隐藏，结构没有嵌套，想鼠标移开还能移到下面对象上，需要使用js的定时器。

 

　　See the Pen transition过渡动画案例4 by zhaolanzhen (@mrszhao) on CodePen.