CSS中过渡效果（transition）
CSS中过渡效果（transition）
过渡（⽆继承性）
CSS3提供了强⼤的过渡属性，它可以在不使⽤Flash动画或者JavaScript脚本的情况下，为元素从⼀种样式转变为另⼀种样式时添加效果，例如渐显、渐弱、动画快慢等。
1、transition-property属性
transition-property 属性⽤于指定应⽤过渡效果的CSS属性的名称。
基本语法格式：
transition-property: none | all | property;
属性值描述
none没有属性获得过渡效果
all所有属性都将获得过渡效果
property定义应⽤过渡效果的CSS属性名称，多个名称之间⽤逗号分隔
2、transition-duration属性
transition-duration属性⽤于定义过渡效果花费的时间，默认值为0，常⽤单位是秒（s）或者毫秒（ms）。
基本语法格式：
transition-duration:time;
3、transition-timing-function属性
transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。
基本语法格式：
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
属性值描述
linear指定以相同速度开始⾄结束的过渡效果，等同于cubic-bezier(0,0,1,1)
ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。
ease-in指定以慢速开始，然后逐渐加快（淡⼊效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。
ease-out指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）。
ease-in-out指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。
cubic-bezier(n,n,n,n)定义⽤于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。
4、transition-delay属性
transition-delay属性规定过渡效果何时开始，默认值为0，常⽤单位是秒（s）或者毫秒（ms）。
基本语法格式：
transition-delay:time;
time为正数：过渡动作会延迟触发。
time为负数：过渡动作会从该时间点开始，之前的动作被截断。
5、transition属性
transition属性是⼀个复合属性，⽤于在⼀个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。
基本语法格式：
transition：property duration timing-function delay;
cssclass属性使⽤transition属性设置多个过渡效果时，它的各个参数必须按照顺序进⾏定义，不能颠倒。
例如：transition:border-radius 5s ease-in-out 2s;
兼容性
出⾃：
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.test{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.test li{
float: left;
width: 170px;
height: 100px;
margin: 0 5px;
padding: 10px;
border: 1px solid red;
color: #000;
transition-property: border-color background-color color;
transition-duration: 1s;
transition-timing-function: ease-in;
}
.test li:hover{
border: orange;
background-color: orchid;
color: palegreen;
}
</style>
<body>
<h1>将⿏标移动到矩形上</h1>
<ul class="test">
<li>本次设定的过渡属性是:border-color,backgroung-color,color</li>
</ul>
</body>
</html>
总结
1、transition(过渡)是指为了添加⿏标移到某种元素时，其可以从⼀种样式转变到另⼀种样式。
2、指定效果持续时间（时间默认为零，若不指定，则没有效果）。
3、实际开发中⼀般使⽤简写：
控制单个样式transition：属性名 过渡所需时间 过渡⽅式 延迟时间
控制多个样式transition：属性名1 过渡所需时间 过渡⽅式 延迟时间，属性名2 过渡所需时间 过渡⽅式 延迟时间(以此类推，中间以逗号隔开)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。