CSS属性--过渡(transtion)

首先介绍一下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来控制了,这个值得注意学习!

你可能感兴趣的:(CSS属性--过渡(transtion))