transition动画效果html,CSS3第⼗课：transition过渡动画（内
附神器！）
在⼗年前，我⽤flash做动画的时候，总结了⼀下flash的运动规律，主要有形状、⼤⼩、位置、⾓度、颜⾊、透明度、加减速等变化。没想到移动端异军突起，似乎⼀夜之间，flash就没落了。想起⾃⼰曾经每天必逛的闪吧，在2012年也停⽌更新，虽然现在⽹站还在， 但也只是⼀个象征了，偶尔回去悼念⼀下，怀念过去在上⾯留下的时光。
不知道那些出名的闪客现在都从事什么⾏业了~~~
现在电脑⾥⾯还保存着阿桂动画整个系列，⽪三的哐哐哐系列，满满的回忆啊。
flash在web端没有⽴⾜之地，连最后的流媒体视频格式也要被HTML5的⾳视频标准给⾰命了，flash算正式落幕，曾经经常骚扰我们的flash player也不再需要安装了……
扯远了>_<
其实transition结合transform差不多可以完成flash的⼤部分补间动画，不，过渡动画。
⼀、transition过渡动画
当元素的样式从⼀种状态变成另⼀种状态的时候，产⽣平滑的过渡效果。
注意：transition只能在两种不同的状态之间产⽣过渡动画，不能有两种以上的状态，这和animation动画不⼀样，所以论武⼒
值，transition只能算阉割版的animation。
可以把第⼀个状态表⽰为初始值。第⼆个状态表⽰为结束值。
⽐如颜⾊从⿊⾊变成⽩⾊，宽度从100px变成200px，透明度从1变成0.5等等，这都属于⼀个样式状态的变化。
所以要对⼀个元素做过渡动画，必须有两个要素要满⾜：
1、哪个对象要做动画。
2、动画要执⾏多长时间。因为默认值是0，所以必须设置运动的时长。
什么时候开始执⾏动画呢？那就是当样式的值发⽣改变的时候，最初级的运⽤就是利⽤:hover伪类来实现效果。
因为兼容性的问题，低版本浏览器请加上前缀。a{
color:#333;
-moz-transition: .2s;  /* Firefox 4 */
-webkit-transition: .2s;/* Safari 和 Chrome */
-o-transition: .2s;    /* Opera */
transition:.2s;  /* 运⾏时长是必须值，⽽且要把transition设置在对象的初始状态上，不能放在:hover结束状态上，否则⿏标移开的时候没有动画效果*/
}
a:hover{
color:#F78500;
}
⼆、transition的属性transition-property  执⾏过渡动画的样式属性，默认值为all。
transition-delay  延迟多少时间执⾏过渡动画，默认值0。
transition-duration  执⾏过渡动画花费的时间，默认值为0。
transition-timing-function  动画执⾏的加减速贝塞尔曲线。默认值为ease。
1、transition-property⽀持的属性。
js控制css3动画触发
能够⽤具体的数字类的值表⽰的属性。不是所有的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等值。其实，它的语法规则可以有那么多↓/* Keyword values */
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;
/* Function values */
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-timing-function: frames(10);
/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
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.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。