CSS属性--过渡(transtion)

时间：2022-11-30 16:43:53

首先介绍一下transition的属性取值：

transition-property : 主要设置对象中的参与过渡的属性，包括（border-color,background-color,color）

transition-duration : 主要设置对象过渡的持续时间

transition-timing-function : 主要设置对象过渡的动画类型

transition-delay : 主要设置对象延迟过渡的时间

理解了这几个属性，过渡就基本掌握了，一般我把它经常运用到制作导航菜单的属性中去！

现在来细细理解这几个的意思！

比如：

　　

.test{

　　transition : border-color .5s ease-in .1s,

　　　　　　　　background-color .5s ease-in .1s,

　　　　　　　　color .5s ease-in .1s;

　　}

是什么意思？我们来把它拆分看看：

transition-property:border-color, background-color, color;//参与过渡的属性

transition-duration:.5s, .5s, .5s;//对象过渡持续的时间

transition-timing-function:ease-in, ease-in, ease-in;//对象过渡的动画类型

transition-delay:.1s, .1s, .1s;//对象延迟过渡的时间
注意：如果其他属性一样的话，我们可以用同一个参数来表示就可以了，就比如除了transiton-propperty之外的三个就可以写一个值就可以了，如下：
transition-property:border-color, background-color, color;

transition-duration:.5s;

transition-timing-function:ease-in;

transition-delay:.1s;
注意：如果比如transition-property的所有属性都需要的话，而其他属性参数都一样的话，可以这样表示：

transition : all .5s ease-in .1s;
拆分就是这样：
transition-property:all;

transition-duration:.5s;

transition-timing-function:ease-in;

transition-delay:.1s;

现在我们用一个实例来实现以下吧

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<style>

.test{

    overflow:hidden;

    width:100%;

    margin:0;

    padding:0;

    list-style:none;

}

.test li{

    float:left;

    width:100px;

    height:100px;

    margin:0 5px;

    border:1px solid #ddd;

    background-color:#eee;

    text-align:center;

    -moz-transition:background-color .5s ease-in;

    -webkit-transition:background-color .5s ease-in;

    -o-transition:background-color .5s ease-in;

    -ms-transition:background-color .5s ease-in;

    transition:background-color .5s ease-in;

    //可以看到，我们只设置了背景颜色一个属性，动画持续过渡时间为5s，动画的类型为 ease-in,没有设置延迟时间。

}

.test li:nth-child(1):hover{background-color:#bbb;}

.test li:nth-child(2):hover{background-color:#999;}

.test li:nth-child(3):hover{background-color:#630;}

.test li:nth-child(4):hover{background-color:#090;}

.test li:nth-child(5):hover{background-color:#f00;}

</style>

</head>

<body>

<ul class="test">

	<li>背景色过渡</li>

	<li>背景色过渡</li>

	<li>背景色过渡</li>

	<li>背景色过渡</li>

	<li>背景色过渡</li>

</ul>

</body>

</html>

这样做就省去了使用JavaScript来控制了，这个值得注意学习！

相关文章