概念:在CSS3中,我们可以使用transition属性将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”,从而实现动画效果。
CSS3变形(transform)呈现的仅仅是一个结果,而CSS过渡(transition)呈现的是一个过程。这个所谓的过程,通俗来说就是一种动画变化过程,如渐渐显示,渐渐隐藏,动画快慢等
语法:
transition:过渡属性 过渡时间 过渡方式 延迟时间;
实例:指定单个属性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
padding:5px 10px;
margin:20px;
text-align:center;
border-radius:20px;
background-color:rgba(138,199,83,0.6);
cursor:pointer;
transition:background-color 0.3s linear 0s;
}
.a:hover{
background-color:rgba(144,83,199,0.4);
}
style>
head>
<body>
<div class="a">按钮div>
body>
html>
运行结果
实例:指定多个属性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
*{
padding:0;
margin:0;
}
div{
width:50px;
display:inline-block;
padding:5px 10px;
margin:20px;
text-align:center;
background-color:rgba(138,199,83,0.6);
cursor:pointer;
transition:background-color 1s linear 0s,color 0.3s ease 0s,border-radius 0.5s linear 0s;
}
.a:hover{
color:white;
background-color:rgba(144,83,199,0.4);
border-radius:20px;
}
style>
head>
<body>
<div class="a">按钮div>
body>
html>
运行结果
实例:指定全部属性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡title>
<style>
*{
padding:0;
margin:0;
}
div{
width:50px;
display:inline-block;
padding:5px 10px;
margin:20px;
text-align:center;
background-color:rgba(138,199,83,0.6);
cursor:pointer;
transition:all 0.3s linear 0s;
}
.a:hover{
background-color:rgba(144,83,199,0.4);
width:100px;
border-radius:20px;
}
style>
head>
<body>
<div class="a">按钮div>
body>
html>
运行结果
说明:凡是涉及CSS3过渡,我们都是结合:hover伪类来实现过渡效果的
transition是一个复合属性,主要包括4个子属性。
属性 | 说明 |
---|---|
transition-property | 对元素的哪一个属性进行操作 |
transition-duration | 过渡的持续时间 |
transition-timing-function | 过渡的速率变化方式 |
transition-delay | 过渡的延迟时间(可选参数) |
在"实例:指定单个属性"中,属性值
/*transition复合属性*/
transition:background-color 0.3s linear 0s;
/*transition子属性*/
transition-property:background-color;
transition-duration:0.3s;
transition-timing-function:linear;
transition-delay:0s
这两者代码是等价的
概念:在CSS3中,可以使用transition-property属性定义过渡效果操作的是哪一个属性.
当指定的CSS属性的值发生改变时,过渡效果才开始
语法:
transition:property:none | all | property;
属性值
属性值 | 说明 |
---|---|
none | 没有属性应用过渡效果 |
all | 默认值,所有属性都应用过渡效果 |
property | 应用过渡效果的属性名称列表,多个属性间以逗号分隔 |
概念:在CSS3中,transition-duration属性用于指定过渡效果持续的时间
语法:
transition-duration:time;
属性值
属性值 | 说明 |
---|---|
time | 完成过渡效果所需要的时间(以秒或毫秒记)。默认值为0,表示不出现过渡动画。可以指定多个时长,每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁剪。两种情况下,属性列表都保持不变 |
概念:在CSS3中,transition-timing-function属性用于指定过渡效果执行时速度变化的时间曲线
语法
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
属性值
属性值 | 说明 | 速率 |
---|---|---|
linear | 规定以相同速度开始至结束的过渡效果,即”匀速“ | |
ease | 默认值,规定慢速开始,变快之后慢速结束的过渡效果 | |
ease-in | 规定速度越来越快的过渡效果 | |
ease-out | 规定速度越来越慢的过渡效果 | |
ease-in-out | 规定以慢速开始和结束的过渡效果 | |
cubic-bezier(n.n,n,n) | 在cubic-bezier函数中自定义值,参数是0~1的数值 |
概念:在CSS3中,transition-delay属性用于指定执行过渡效果之前需要等待的时间
语法:
transition-delay:time;
属性值
属性值 | 说明 |
---|---|
time | 定义过渡效果属性执行之前所需要等待的时间(以秒或毫秒计)。该属性值可以为正整数、负整数或0。默认值为0,即不延迟。当取值为正整数时,过渡效果会延迟触发。当取值为负整数时,过渡效果会从该时间点开始,之前的效果会被截断。 |
实例:导航下拉列表
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航菜单title>
<style>
*{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
.nav{
width:150px;
height:50px;
background-color:rgb(83,199,86);
margin:20px auto;
line-height:50px;
text-align:center;
}
.list{
list-style: none;
height:0;
overflow:hidden;
/* 指定应用过渡效果的属性为height */
transition-property:height;
/* 指定过渡效果持续时间为1s */
transition-duration:1s;
/* 指定过渡效果速度变化 */
transition-timing-function:linear;
/* 指定过渡效果延迟执行 */
transition-delay:0s;
}
.list li{
background-color:lightblue;
border-bottom:1px solid red;
list-style:none;
}
.nav:hover .list{
/* 当鼠标移入导航菜单盒子时,下拉列表的高度发生变化 */
height:240px;
}
style>
head>
<body>
<div class='nav'>
<a href="">中国新四大发明a>
<ul class="list">
<li><a href="">高速铁路a>li>
<li><a href="">扫码支付a>li>
<li><a href="">共享单车a>li>
<li><a href="">网络购物a>li>
ul>
div>
body>
html>