CSS3 (2) --- transition (transition)
First, the concept
1. What is the transition
通俗理解From a state gradually we transition to another state.
For example, a box original width of 100px, the width of the box when the mouse clicks into 200px, 100px if changes directly from the 200px. Visually go not friendly. We prefer to see is a smooth transition.
2, floating grammar
属性语法格式
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
// 如果有多组属性变化，还是用逗号隔开。前两个属性必须写。后两个可以不写。运动曲线默认匀速。开始时间默认0秒。属性值
注意
- 如果想要所有的属性都变化过渡， 写一个all 就可以
- transition-duration 花费时间 单位是 秒 s （这个秒是一定需要的）
- 运动曲线 默认是 ease
- 默认是 0s 立马开始
- 过渡写到本身上 谁做过渡动画，写到谁身上(下面例子说明)Motion profile schematic
Second, the example
1, an example of a
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3过渡</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/*transition: width 0.5s ease 0s, height 0.3s; 多组属性用逗号分隔*/
transition: all 1s; /* 这里过渡是当前div，按照谁做过渡动画，写到谁身上，所以这里要写在这里*/
}
div:hover {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>2, two exemplary
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS过渡</title>
<style>
div {
width: 183px;
height: 130px;
border: 1px solid red;
overflow: hidden; /*多余部分隐藏*/
}
div img {
width: 193px;
height: 130px;
transition: all 0.4s; /*所以变化，过渡时间0.4秒*/
}
div:hover img {
margin-left: -10px; /*移动*/
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>
</html>3, Example Three
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css过渡</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.subnav {
margin: 100px auto;
width: 20px;
}
.subnav li {
width: 20px;
height: 20px;
margin: 3px 0;
background-color: pink;
position: relative;
}
.subnav div {
position: absolute; /*子绝父相*/
right: 0;
top: 0;
height: 20px;
width: 0;
background-color: purple;
transition: all 0.6s;
z-index: -1; /*这里设置定位级别小于父类,所以父类浮在它上面*/
}
.subnav li:hover div {
width: 100px;
}
</style>
</head>
<body>
<div class="subnav">
<ul>
<li>
<div></div>
</li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>
</body>
</html>
你如果愿意有所作为，就必须有始有终。(16)