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 (@mr免费云主机域名szhao) on CodePen.以上是“html中transition动画效果怎么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注百云主机行业资讯频道！

相关推荐: Sublime怎么实现html文件浏览器更新

这篇文章主要讲解了“Sublime怎么实现html文件浏览器更新”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Sublime怎么实现html文件浏览器更新”吧！ 1 所需插件:谷歌浏览器的livereload插…