过渡效果 - transition
1.什么是过渡
使得CSS的属性值在一段时间内平缓变化的一个效果。
2.语法
1.指定过渡属性
作用:指定那个属性值在变化的时候使用过渡
属性:transition-property
取值:
1.属性名称
2.all
但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现
允许使用过渡效果的属性:
1.所有与颜色相关的属性
2.所有取值为数字的属性。
ex:
案例
!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style>
div{
width:100px; **宽
height:100px; **高
background:yellow; **div颜色是黄色
transition-property:height ; **选择属性
}
div:hover{
height:300px; **过渡效果 高增加300px
background-color:red; **过渡过程中变为红色
}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果</div>
</body>
</html>
2.指定过渡时长
作用:指定在多长时间内完成过渡的效果
属性:transition-duration
取值: s 或 ms
1s = 1000ms
300ms = 0.3s
ex:
transition-duration:0.3s;
案例
大部分和上面一样,
!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style>
div{
width:100px; **宽
height:100px; **高
background:yellow; **div颜色是黄色
transition-property:height ; **选择属性
transition-duration: 2s; **两秒
}
div:hover{
height:300px; **过渡效果 高增加300px
background-color:red; **过渡过程中变为红色
}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果</div>
</body>
</html>
3.指定过渡的速度时间曲线函数
作用
属性:transition-timing-function
取值:
1.ease
默认值,慢速开始,快速变快,慢速结束。
2.linear
匀速
3.ease-in
由慢变快
4.ease-out
由快变慢
5.ease-in-out
慢 快 慢
<style> 和上面的案例一样,这里只用加这一点
div
{
width:100px;
height:100px;
background:yellow;
transition-property:height;
transition-duration: 5s;
transition-timing-function:ease-in; **这里
}
div:hover
{
height:700px;
background-color:red;
}
</style>
- 指定过渡演示
作用:当激发过渡效果后,等待几秒在开始执行操作。
属性:transition-delay
取值:以s 或 ms为单位的数字
案例
大部分和上面一样,
!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:yellow;
transition:height 5s; 这样写意思是,transition:选择属性 时间;(就是讲将transition-property和transition-duration 合在一起)
transition-delay: 2s;
}
div:hover{
height:300px; **过渡效果 高增加300px
background-color:red; **过渡过程中变为红色
}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果</div>
</body>
</html>