tags: [CSS,Transition ]
Transition
1. transition是什么?
- 中文:过渡;转变;变革;变迁
2. transition有什么用?
作用: 实现过渡效果 (元素从属性从一个值的样式变为另一个值的样式)
语法:
transition : [效果表现的属性] [效果持续的时间] ;
/* 实例 */
transition : width 3s ;
- 3s: 表示width属性设置过渡效果，持续时间3s (对于过渡时间： 时间值越大，时间过渡时间越长，相比来说，就变化越缓慢)
- width: 需要发生过渡变化的属性
⚠️为了支持其他效果，需要添加其他属性支持，以便于兼容性支持
/*完整格式*/
div
{
/*注：如果不写时间，则默认为0*/
transition : width 2s;
/*增加的携带的属性设置*/
/*Firefox 4 (兼容火狐4)*/
-moz-transition : width 2s;
/*Safari 和 Chrome(兼容Safari和谷歌Chrome)*/
-webkit-transition: width 2s;
/*Opera (兼容Opera)*/
-o-transition: width 2s;
}
3. 效果是怎样生效的呢?
- 需要有「条件」来触发属性值的改变(一般是
鼠标悬浮) - transition 设置在
原始属性值所在选择器中 - 改变是指的 「相对原始属性值的改变」
▶案例:
当鼠标悬浮至元素<div>上时，启动过渡效果，移开鼠标则效果消失，恢复原状
<!--实例代码-可直接运行-->
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
transition: width 2s;
/*设置transition过渡*/
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
/*设置div的鼠标悬浮样式*/
div:hover {
width: 300px;
}
p b {
color: red;
}
</style>
</head>
<body>
<div>
</div>
<p>把鼠标移动到黄色div上，就会显示过渡效果</p>
<p><b>注意:本例在 Internet Explorer浏览器无效</b></p>
</body>
</html>
效果：
过渡是指: 设置元素属性，属性值发生变化时，对变化的效果过渡(放慢过程) 此例中，过渡就是，从
未hover态到hover,div元素属性width从100px->300px过渡，效果就是缓慢的变宽
