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 |