transition属性详细讲解
大家好,又见面了,我是你们的朋友全栈君。
transition属性的格式:
transition:transition-property,transition-duration,transition-timing-function,transition-delay;
它的四个过渡属性是这样的意思:
transition-property:规定设置过渡效果的属性名称。
transition-duration:规定完成这个过渡效果需要多少秒或者毫秒。
transition-timing-function:规定这个过渡效果的速度曲线。
transition-delay:规定过渡的延迟时间。
过渡的动画类型主要有:
linear:线性过渡。
ease:平滑过渡。
ease-in:逐渐加速。
ease-out:逐渐减速。
ease-in-out:先加速后减速。
他们的属性介绍主要是:
linear:规定以相同的速度开始至结束的过渡效果。
ease:规定慢速开始逐渐变快然后慢速结束的过渡效果。
ease-in:规定以慢速度开始的过渡效果。
ease-out:规定以慢速度结束的过渡效果。
ease-in-out:规定以慢速开始至结束的过渡效果。
我们做一个小例子,我们利用伪类,当光标移动在div上,背景颜色由红色变成绿色:
<style> .div1{
width: 100px; height: 100px; background-color: red; transition: background-color 2s linear; } .div1:hover{
background-color: green; } </style> </head> <body> <div class="div1"></div> </body>
总体来说:transition属性还是搭配伪类用的比较多,比如hover、:focus,但是也常会用到javascript、@madia触发。transition和javascript的结合更为强大。js用来设定要变化的样式,transition则负责动画效果。我们一般都在css里面写transition,transition属性可以指定参与的过渡属性,过度时间,过渡延迟时间以及过渡动画类型等。
在写代码的时候发现transition-property属性不显示,我后来去博客查了查,才知道目前的主流浏览器,需要我们在实际开发中加浏览器厂商的前缀。我们举个例子。
.lzr{
-webkit-transition: backgorund 0.5s ease 0; -moz-transition: backgorund 0.5s ease 0; -ms-transition: backgorund 0.5s ease 0; transition: backgorund 0.5s ease 0; }
写完了,看看浏览器端,IE没问题,chrome没问题,火狐也没问题,Opera问题来了,居然没有效果,最后发现Opera要这样写:
-o-transition: backgorund 0.5s ease 0s;
大家看到差异了吗?
我总结一下:
火狐:-moz-
IE:-ms-
chrome:-webkit-
opera:-o-
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/234185.html原文链接:https://javaforall.cn