CSS过渡
CSS过渡，是一种在更改CSS属性时控制动画速度的方法，可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。例如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，但如果使用CSS过渡后该元素的颜色将按照一定的曲线进行变化。
一、过渡属性
transition 过渡动画主要通过控制元素的属性变化来实现动画效果，用于设置以下个转换属性的简写属性：
1、transition-delay：表示过渡效果开始前的延迟时间，如果未设定此部分，过渡会立即开始，因为默认值为0。
2、transition-duration：定义过渡效果的持续时间，即属性从初始状态过渡到最终状态所需的时间。如果未设定此部分，过渡不会有效果，因为默认值为0。
3、transition-property：用于指定使用过渡效果CSS 属性的名称，比如背景颜色、宽度、高度等，如果不设置这个属性，那么默认会对所有的属性进行过渡效果处理。
4、transition-timing-function ： 规定过渡速度的变化曲线，比如线性（linear）、加速（ease）、减速（ease-in）、缓入（ease-out）和缓出（ease-in-out）等。
二、创建动画
要使用CSS过渡创建动画，我们需要指定两个值：
- 更改的CSS属性；
- 效果持续时间。
以下代码为width属性添加了一个过渡效果，持续时间为2秒。首先设置目标属性和持续时间：
div {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
如果未指定持续时间部分，则默认值为0，并且不会有转换。接下来需要触发属性变化，以下代码使用鼠标悬停事件触发元素上的动画：
div:hover {
width: 300px;
}
这里是完整的源代码：
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: black;
-webkit-transition: width 2s;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Hi</div>
</body>
</html>
三、多项改变
可以通过用逗号分隔属性来为多个CSS属性添加过渡效果：
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: black;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>Hover me to see the transition effect!</div>
</body>
</html>
四、浏览器兼容
以下表格列出各浏览器兼容的版本：
|
IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
|
9+ | 12+ | 28+ | 4+ | 6.1+ | 12.1+ | 7+ |
4.4 |
广告合作
QQ群号：4114653
温馨提示：
- 本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。邮箱：2942802716#qq.com（#改为@）。
- 本站原创内容未经允许不得转裁，转载请注明出处“站长百科”和原文地址。