css3过渡效果

最新推荐文章于 2023-07-22 18:18:14 发布

凡兮丨奕秋

最新推荐文章于 2023-07-22 18:18:14 发布

阅读量276

点赞数

分类专栏： web前端学习

web前端学习专栏收录该内容

13 篇文章

订阅专栏

CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的

动画。

transition的语法：transition： transition-property || transition-duration ||

transition-timing-funciton || transition-delay ；

其参数的取值说明如下：

<transition-property>:定义用于过渡的属性；

<transition-duration>:定义过渡过程需要的时间（必选，否则不会产生过渡效果）

<transition-timing-function>:定义过渡的方式；

<transition-delay>:定义开始过渡的延迟时间；

使用transition属性定义一组过渡效果，需要以上四个参数。transition属性可以同时定义

两组或两组以上的过渡效果，组与组之间用逗号分隔。

基于webkit内核的私有属性是：-webkit-transition;

基于gecko内核的私有属性是：-moz-transition;

基于prestot内核的私有属性是：-o-transition;

如下例1：过渡效果

图1：起始效果

图2：结束效果

图1所对应的初始代码如下：

代码1：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20171214 CSS过渡属性</title>
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;

transition: all 1000ms linear 500ms;
-o-transition: all 1000ms linear 500ms; /*兼容parsto内核*/
-moz-transition: all 1000ms linear 500ms; /*兼容gecko内核*/
-webkit-transition: all 1000ms linear 500ms; /*兼容webkit内核*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>

当给div增加代码2之后，即可实现图2的效果：

代码2：

div:hover{

transform: rotate(60deg);

background-color: red;

}

即是div元素实现颜色的变化和以图形的原点为原心顺时针旋转60度。

1.指定过渡的属性 ( transition-property属性 )

transition-property的语法：transition-property：none | all | <property> ;

其取值说明如下：

none：表示没有任何CSS属性有过渡效果；

all：为默认值，表示所有的CSS属性都有过渡效果；

<property>：指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果。

若将代码1做如下更改，更改之后的代码为代码3：

代码3：

div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;

transition: background-color 1000ms linear 500ms;
-o-transition: background-color 1000ms linear 500ms; /*兼容parsto内核*/
-moz-transition: background-color 1000ms linear 500ms; /*兼容gecko内核*/
-webkit-transition: background-color 1000ms linear 500ms; /*兼容webkit内核*/

}

此时只有背景色有过渡效果，循序渐进的变化，而其他的效果则没有过渡；

2.指定过渡的时间（transition-duration）

transition-duration属性：用于定义过渡过程所需要的时间。

transition-duration语法：transition-duration:<time>;

其取值说明：

<time>指定一个用逗号分隔的多个时间值，单位是秒(s)或毫秒(ms)。默认值是0，即是看不到过渡效果。

可对代码1进行如下更改为代码4：

代码4：

div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;

transition: background-color 3000ms linear 500ms;
-o-transition: background-color 3000ms linear 500ms; /*兼容parsto内核*/
-moz-transition: background-color 3000ms linear 500ms; /*兼容gecko内核*/
-webkit-transition: background-color 3000ms linear 500ms; /*兼容webkit内核*/

}

此时过渡时间将会由1s变化为3s。

3.指定过渡延迟时间（transition-delay）：

transition-delay：用于定义过渡的延迟时间；

transition-delay语法：transition-delay:<time>;

其取值说明如下：<time>的取值可以为秒(s)或毫秒(ms)。默认值为0，即是没有时间延迟，立即开始过渡效果。

可将代码1更改为如下的代码5：

代码5：

div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;

transition: background-color 3000ms linear 2000ms;
-o-transition: background-color 3000ms linear 2000ms; /*兼容parsto内核*/
-moz-transition: background-color 3000ms linear 2000ms; /*兼容gecko内核*/
-webkit-transition: background-color 3000ms linear 2000ms; /*兼容webkit内核*/

}

此时的过渡效果将由500ms的延迟更改为延迟到200ms;

4.指定过渡方式（transition-timing-function）

transition-timing-function属性用于定义过渡的速度曲线，即是过渡方式。

transition-timing-function语法：transition-timing-function: ease | linear | ease-in | ease-out

| ease-in-out | cubiz-bezier(n,n,n,n);

其取值的说明如下：

linear: 表示匀速过渡；

ease: 默认值，表示过渡的速度先慢，再快，最后非常慢；

ease-in: 表示过渡的速度先慢，后越来越快，直至结束；

ease-out: 表示过渡的速度先快，后越来越慢，直至结束；

ease-in-out: 表示过渡的速度在开始和结束时都很慢；