CSS3-过渡效果
2019-02-13 本文已影响27人
riverhh
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
- 如果想要所有的属性都变化过渡， 写一个all 就可以
- transition-duration 花费时间 单位是 秒 s （这个秒是一定需要的）
- 运动曲线 默认是 ease
- 默认是 0s 立马开始
运动曲线示意图：
运动曲线示意图.png
简单代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style >
div {
width: 200px;
height: 250px;
background-color: pink;
/* 属性 花费时间 曲线 何时开始*/
transition: width 2s ease-in 0s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下所示：
过渡.gif
