Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍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动画效果怎么用"这篇文章的所有内容，感谢各位的阅读!希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.