html中transition动画效果怎么用
这篇文章主要介绍html中transition动画效果怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联是一家专注于成都网站建设、网站制作与策划设计,大箐山网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:大箐山等地区。大箐山做网站价格咨询:18980820575
一、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动画效果怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享标题:html中transition动画效果怎么用
分享链接:http://scyanting.com/article/pohceh.html