CSS动画实现-过渡属性transtion
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值过渡属性需要触发事件，如：hover（鼠标划过事件）。
其中，transtion可以细分为四部分功能。
1. transition-duration：检索或设置对象过渡的持续时间
设置过渡时间（单位：s, ms），即元素改变持续的时间。
我们通过hover（鼠标划过事件）触发对元素的改变是一瞬间完成的，而通过该属性，我们可以将元素改变的时间延长，这就能构成一种简单的动画效果。可以说是transtion里最重要的功能，也是后面与transform搭配构成动画效果的重要属性。
2. transition-property：检索或设置对象中的参与过渡的属性
我们可以通过一个例子来说明他的作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡属性</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background:#f00;
transition-duration: 2s;
/* 过渡时间为2s。
逆战班与你同行 */
}
.box:hover{
width:400px;
height:400px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
以上代码的意思是设置一个200px*200px，背景为红色的div元素，鼠标滑过使div的宽高变为400px。实践时，我们会看到元素的宽高的变化会持续2s，而我们给div初始效果代码里添加transition-property: width；就会看到仅仅元素宽的变化持续2s，而高的变化是一瞬间完成的，即元素参与过渡的仅为元素的宽。
其属性值除了可以单独设置某个属性，也可以设置多个属性 width，height； 还可以设置为all（默认值），代表所有属性。
3. transition-delay：检索或设置对象延迟过渡的时间
设置延迟过渡的时间（s, ms），即触发事件到元素开始变化的时间。其属性值可以为正，也可以为负，为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果。
4. transition-timing-function：检索或设置对象中过渡的动画类型
在实践过程中，我们可以发现元素不是匀速变形的，而是逐渐慢下来，这就是transition-timing-function默认值ease的效果，我们也可以设置为以下属性值：
linear 匀速
ease（默认值） 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
5. 复合式写法
transition:all 2s 1s linear ;
transition: 2s linear 1s all ;
为了简化书写，trastion支持复合式写法。唯一需要注意的是，当使用复合式写法的时候，过度时间和延迟时间的相对顺序是不能互换的，第一个值代表过度时间，第二个值代表延迟时间。
注：哪个元素发生变形，就把过渡属性添加给谁；建议写给元素初始的效果里。
1226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
