CSS3过渡
2018-01-27 本文已影响0人
挥剑斩浮云
transition语法简写
语法：transition：属性 持续时间 过渡方法 延迟时间;
- 在
CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果（仔细理解这句话） - 语法：
transition:属性 持续时间 过渡方法 延迟时间; - 说明：其实
transition属性是一个复合属性，主要包含4个子属性：
（1）transition-property：对元素的哪一个属性进行操作；
（2）transition-duration：过渡的持续时间；
（3）transition-timing-function：过渡使用的方法（函数）；
（4）transition-delay：可选属性，指定过渡开始出现的延迟时间；
过渡属性transition-property
- 在
CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现过渡效果 - 语法：
transition-property取值;默认值为：all；默认为所有可以进行国度的css属性；如果提供多个属性值，以逗号进行分隔 - 说明：
transition-property：属性的取值是一个“CSS属性名”。 - 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 transition-property属性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:50px;
background-color:#14C7F3;
transition-property:height;
transition-duration:0.5s ;
transition-timing-function:linear;
transition-delay:0;
}
div:hover
{
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 分析：这里使用
transition-property属性指定了过渡动画所操作的CSS属性是height当鼠标移动到div元素上时，元素的高度会在0.5s内从50px过渡到100px= - 对于
CSS3过渡动画，大多数情况下都是配合:hover伪类来使用
过渡时间transition-duration
语法：transition-duration 时间;
说明：transition-duration 属性取值是一个时间，单位为s（秒），可以为小数如0.5s
- 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3过渡</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay:0;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
浏览器效果
过渡方式transition-timing-function
- 在
CSS3中，我们可以使用transition-timing-function属性来定义过渡方式。所谓的“过渡方式”主要用来指定动画在过渡时间内的速率
语法：transition-timing-function:取值;
- 说明：
transition-timing-function属性取值共有5种，具体如下：
transition-timing-function属性取值
延迟时间transition-delay
- 我们可以使用
transition-delay属性来设置动画开始的延迟时间
语法：transition-delay:时间;
- 说明：
transition-delay属性取值是一个时间，单位为s（秒），可以为小数如0.5s；transition-delay属性默认值为0，也就是说当我们没有设置transition-delay属性时，过渡动画就没有延迟时间 - 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 transition-delay属性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius;
transition-duration:1s ;
transition-timing-function:linear;
transition-delay:2s;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 分析：“
transition-delay:2s;”表示鼠标移动到div的那一瞬间开始计时，在计时开始之后还得延迟2s才会开始进行过渡动画，这就是所谓的“延迟时间”。然后当鼠标移出div一瞬间开始，过渡动画同样也会延迟2s才会开始恢复
