CSS3简单运用过渡元素（transition）

CSS3过渡

概念：在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

这两者代码是等价的

过渡属性:transition-property

概念：在CSS3中，可以使用transition-property属性定义过渡效果操作的是哪一个属性.

当指定的CSS属性的值发生改变时，过渡效果才开始

语法：

transition:property:none | all | property;

属性值

属性值	说明
none	没有属性应用过渡效果
all	默认值，所有属性都应用过渡效果
property	应用过渡效果的属性名称列表，多个属性间以逗号分隔

过渡时间:transition-duration

概念：在CSS3中，transition-duration属性用于指定过渡效果持续的时间

语法：

transition-duration:time;

属性值

属性值	说明
time	完成过渡效果所需要的时间（以秒或毫秒记）。默认值为0，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁剪。两种情况下，属性列表都保持不变

过渡方式:transition-timing-function

概念：在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的数值

延迟时间:transition-delay

概念：在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>