本文主要内容
一、Transition是什么
二、Transition的语法
三、Transition的属性值
四、Transition的使用
五、总结
一、Transition是什么
W3C标准中对CSS3的transition是这样描述的：“CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
在实际的开发中，经常会遇到手机上的JS动画卡顿现象，所以需要借用其他办法来替代使用，而CSS3的过渡就可以很好的解决这个问题，一起来看吧~~~
二、Transition的语法
下面同样从其语法和属性值开始一步一步来学习transition的具体使用。
-
transition ： <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;
transition主要包含四个属性值：
1、执行变换的属性：transition-property；
2、变换延续的时间：transition-duration；
3、在延续时间段，变换的速率变化：transition-timing-function；
4、变换的延迟时间：transition-delay。
下面继续来看看这四个属性值的具体使用吧~
三、Transition的属性值
1、transition-property
语法：transition-property: none | all | indent;
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：
-
none(没有属性改变)；
-
all（所有属性改变）这个也是其默认值；
-
indent（元素属性名）。
当其值为none时，transition马上停止执行；当指定为all时，则元素产生任何属性值变化时都将执行transition效果；ident是可以指定元素的某一个CSS属性值。
常规的元素宽高、颜色等CSS属性变化都可以触发transition效果。但是需要提醒一点，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。
2、transition-duration
语法：transition-duration: time;
transition-duration是用来指定元素转换过程的持续时间。
取值：time为数值，单位为s(秒)或者ms(毫秒)。其默认值是0，也就是变换时是即时的。
可以作用于所有元素，包括:before和:after等伪元素。
3、transition-timing-function
语法：transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
transition-timing-function的值允许根据时间的推进去改变属性值的变换速率，有如下几个可能的取值：
-
ease：逐渐变慢（默认值）；
-
linear：匀速；
-
ease-in：加速；
-
ease-out：减速；
-
ease-in-out：加速然后减速。
4、transition-delay
语法：transition-delay: time;
transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后等待多少时间后才开始执行transition效果。
取值：time为数值，单位为s(秒)或者ms(毫秒)。默认大小是0，也就是变换立即执行，没有延迟。
其使用和transition-duration极其相似，可以作用于所有元素，包括:before和:after等伪元素。
5、书写方式
有时不只改变一个CSS效果的属性，而是想改变两个或者多个CSS属性的transition效果，那么只要把几个transition的声明串在一起，用逗号（“,”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。
但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的值为transition-duration，第二个为transition-delay。具体书写方式如下：
-
transition: background 5s ease 2s,
-
width 3s ease-in 2s;
如果想给所有元素的属性执行transition效果，那么还可以利用all属性值来操作，此时它们共享同样的延续时间以及速率变换方式，如：
-
transition: all 5s ease 0.3s;
综合上述，可以给transition一个速记法：transition: "property" "duration" "animation type" "delay"；如下图所示：
四、Transition的使用
通过上面，大家对CSS3的Transition属性已经有了一定的概念，下面为了加强在这方面的使用，一起来看下面的DEMO。通过实践来巩固前面的理论知识，也通过实践来加强transition的记忆。
下面的案例主要是在一个div中放置了几个小块，分别是对应了transition-timing-function中的几种类型，然后在div的hover状态下，改变其部分属性，从而达到一种动画效果。
首先把相应的结构代码搞定~
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8" />
-
<title>CSS3的过渡</title>
-
<link rel="stylesheet" type="text/css" href="css/reset.css" />
-
<style type="text/css">
-
-
</style>
-
</head>
-
<body>
-
<!-- 案例的结构 -->
-
<div class="wrap clearfix">
-
<div class="timings-demo">
-
<div class="demo-box ease">HTML5学堂-码匠</div>
-
<div class="demo-box ease-in">HTML5学堂-码匠</div>
-
<div class="demo-box ease-out">HTML5学堂-码匠</div>
-
<div class="demo-box ease-in-out">HTML5学堂-码匠</div>
-
<div class="demo-box linear">HTML5学堂-码匠</div>
-
</div>
-
</div>
-
</body>
-
</html>
接下来，给对应的模块加上相应的CSS样式，从而实现完整的一个过渡效果，如下：
-
.timings-demo {
-
width: 460px;
-
height: 400px;
-
margin: 50px auto;
-
padding: 10px;
-
border: 1px solid #ccc;
-
}
-
.demo-box {
-
width: 150px;
-
height: 50px;
-
margin-bottom: 30px;
-
background: #96c;
-
color: #fff;
-
text-align: center;
-
line-height: 50px;
-
border-radius: 15px;
-
box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
-
}
-
/*ease效果：*/
-
.ease {
-
background: #f36;
-
transition: all 5s ease 0.3s;
-
}
-
/*ease-in效果：*/
-
.ease-in {
-
background: #369;
-
transition: all 3s ease-in 0.5s;
-
}
-
/*ease-out效果：*/
-
.ease-out {
-
background: #636;
-
transition: all 5s ease-out 0s;
-
}
-
/*ease-in-out效果：*/
-
.ease-in-out {
-
background: #3e6;
-
transition: all 2s ease-in-out 2s;
-
}
-
/*linear效果：*/
-
.linear {
-
background: #999;
-
transition: all 6s linear 0s;
-
}
-
/*hover状态下demo-box产生属性变化*/
-
.timings-demo:hover .demo-box {
-
height: 30px;
-
margin: 20px 0 40px 280px;
-
border: 1px solid rgba(255,230,255,08);
-
background: #39f;
-
line-height: 30px;
-
transform: rotate(360deg) scale(1.2);
-
border-radius: 25px;
-
}
最后，其效果图如下：
五、总结
那么今天关于CSS3的Transition就简单的介绍到这里，需要掌握的就是CSS3中Transition的属性值，上文提到的 "property" "duration" "animation type" "delay"。
最后提醒一句，因为Transition是CSS3的属性，所以在书写的时候需要加上相应的内核前缀。
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
