CSS3transition过渡属性的使⽤
⾸先，设置div的初始样式；为了看着⽅便清晰，body也给了样式。
<style>
body{
margin: 10px auto;
width: 800px;
height: 500px;
border: 1px solid red;
}
.tran_div {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
<body>
<div class="tran_div"></div>
</body>
初始样式；红⾊边框是body的边框。
使⽤前先了解⼀下：transition 属性是⼀个简写属性，⽤于设置四个单独的过渡属性：
transition-property            //设置过渡效果的CSS属性名 如width、height、background-color等等
transition-duration            //设置过渡效果完成的时间 秒(s)或者毫秒(ms)  如1s 表⽰过渡效果完成的时间为1秒transition-timing-function  //设置过渡效果的速度曲线
transition-delay                //设置过渡效果开始的时间 如 1s 表⽰1秒后开始过渡效果
因为分别设置四个属性太⿇烦，我们就使⽤transition设置就好了；
transition简写语法：
transition: property duration timing-function delay;  //不需要的不填写即可
此时我们提出需求：在⿏标移⼊把蓝⾊⽅块时，其⾼变为300px；那么应该添加以下代码
.tran_div:hover {
margin属性怎么用height: 300px;
}
但是此时的效果是
可以看到，没有任何的过渡，⾼直接变为300px；那么此时就是transition⼤显⾝⼿的时候了。在上⾯代码的基础上加⼊transition，代码改成了下⾯
.tran_div:hover {
height: 300px;
transition: height 1s linear 1s;
}
此时的效果就如下，在⿏标移动到div上时，等待了⼀秒后开始有动作，将div的⾼变为300px；
那么transition: height 1s linear 1s；这段代码的意思是什么
height：即transition-property属性值。表⽰要改变的css属性名，因为我们要改变的是⾼所以写height，如果是要改变宽就写width，但是这个我们可以省略不写（transition: 1s linear 1s），效果是⼀样的；不写的时候默认为all，表⽰所有属性都会获得过渡效果，意思就是在:hover{}中设置哪些属性发⽣改变就全都发⽣改变。
第⼀个1s： 即transition-duration属性值。 表⽰过渡效果的执⾏时间为1秒（不包括最后⼀个参数transition-delay的等待时间）；
如果需要 过渡效果，此项不能为空，为空时间为0，和不设置transition效果⼀致。
linear：即transition-timing-function属性值。表⽰速度曲线，如果光说⽐较难懂，可以使⽤浏览器的调试来查看和调节速度曲线。
主要的值有linear、ease、ease-in、ease-out、ease-in-out以及使⽤cubic-bezier()来⾃定义，具体可参考
第⼆个1s：即transition-delay属性的值，表⽰1秒后开始过渡动画，在这⾥就是⿏标移动到div上1秒后开始过渡动画；如果不写或设置为0s，则表⽰⽴即开始；
同样的，如果想要宽变⼤，则height改为width即可。
.tran_div:hover {
width: 300px;
transition: width 1s linear 1s; /* 此⾏的width可以不写默认为all 效果相同 */
}
或者是需要⾼宽都变的
.tran_div:hover {
width: 300px;
height: 300px;
transition: 1s linear 1s;
}
上⾯介绍的是⼀个⽅向上的，如果想让⾼向上变⼤该怎么做呢？在代码中加⼊position属性，对div进⾏定位
.tran_div {
position: absolute;
bottom: 0px;
width: 50px;
height: 50px;
background-color: blue;
}
.tran_div:hover {
height: 300px;
width: 300px;
transition: 1s ease 1s;
}
动画效果如下，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。