关于Css3过渡
- Css3过渡
-
- 过渡作用
- 具体参数的取值及说明
- Css3过渡综合写法
- 案例：实际效果（附：代码）
Css3过渡
什么是css3过渡？CSS3 过渡其实就是元素从一种样式逐渐改变为另一种样式的效果，实现了最初级的动画效果。
过渡作用
让元素的变化发生平滑的效果，显得不生硬
具体参数的取值及说明
<transition-property> 定义用于过渡的属性；例：all；
<transition-duration> 定义过渡过程所需要的时间；（必选，否则不会产生过渡效果）；例：2s（两秒）；
<transition-delay> 定义开始过渡的延迟时间；例：1s（一秒）；
<transition-timing-function> 定义过渡的类型；例：ease-in(加速）；
Css3过渡综合写法
例：transition：width，0.5s，1s，linear；
transition：指定属性，过渡时间，延迟时间，动画类型；
（注意：transition属性可以同时定义两组或两组以上的过渡效果，最少写一组，也就是过渡时间属性transition-duration；组与组之间用逗号或空格分隔。）
案例：实际效果（附：代码）
初始效果：
过渡效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1{
width:200px;
height:200px;
background:red;
margin:100px;
border:4px solid #000;
}
.box2{
width:100px;
height:100px;
background:pink;
margin-left:-104px;
transition:all 1s 0.5s;/*所有属性，过渡时间1s，延迟时间0.5s*/
}
.box1:hover .box2{
margin-left:150px;
background:gold;
}
.box3{
width:600px;
height:300px;
background:skyblue;
margin:100px;
border:4px solid #000;
}
.box4{
width:100px;
height:50px;
background:red;
margin:20px 0px;
}
.con1{
transition:all 5s 1s linear;
}
.con2{
transition:all 2s 1s linear;/*匀速*/
}
.con3{
transition:all 2s 1s ease;/*逐步降速，由快到慢*/
}
.con4{
transition:all 2s 1s ease-in;/*逐步加速，由慢到快*/
}
.box3:hover .box4{
width:600px;
background:yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3">
<div class="box4 con1"></div>
<div class="box4 con2"></div>
<div class="box4 con3"></div>
<div class="box4 con4"></div>
</div>
</body>
</html>