html中transition动画效果怎么用
这篇文章主要介绍html中transition动画效果怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
一、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.
以上是"html中transition动画效果怎么用"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！
