介绍
实验中的功能。 可动画属性列表
是一个 CSS 模块，定义了如何创建一个平滑地变换 CSS 属性值的方法。它不仅允许创建变换方法，同时也允许通过定时函数来控制变换方法。
比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。
隐式过渡
通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。
属性
-
transition：简写属性。包含如下属性：transition-delay：指定延迟，即属性开始变化时与过渡开始发生时之间的时长。transition-duration：指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。transition-property：指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。transition-timing-function：指定一个函数，定义属性值怎么变化。
属性 transition
过渡/动画 都可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active或者通过 JavaScript 实现的状态变化。
transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
语法：
transition =
<single-transition>#
<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>
<single-transition-property> =
all |
<custom-ident>
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
语法示例：
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;
-
零或一个值，表示转换应适用的属性。这可能是以下任何一种：
- 关键字
none - 关键字
all - 命名 CSS 属性的
<custom-ident>。
- 关键字
零或一个
<single-transition-timing-function>值表示要使用的过渡函数。零，一或两个
<time>值。
当有一个值时，第一个值被分配给transition-duration。
当有两个值时，第一个值被分配给transition-duration，第二个值被分配给transition-delay。
属性 transition-property
实验中的功能
语法：
transition-property =
none |
<single-transition-property>#
<single-transition-property> =
all |
<custom-ident>
none：没有过渡动画。all：所有可被动画的属性都表现出过渡动画。IDENT：属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。
属性 transition-duration
实验中的功能，可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
语法：
transition-duration =
<time [0s,∞]>#
-
<time>：表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是0s，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。
属性 transition-timing-function
实验中的功能
语法：
transition-timing-function =
<easing-function>#
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
-
<easing-function>：具体看CSS 数据类型 - <timing/esaing-function>篇
属性 transition-delay
实验中的功能
语法：
transition-duration =
<time [0s,∞]>#
-
<time>：表明动画效果属性生效之前需要等待的时间。
应用
示例1：颜色的变化
CSS
.d2{
display: flex;
flex-flow: row;
width: 300px;
justify-content: space-evenly;
}
.trans,
.trans1{
width: 100px;
height: 100px;
background-color: green;
}
.trans1{
transition: background-color 2s ease-in;
}
.trans:hover{
animation: 2s "ani1" 1 ease-in alternate;
}
.trans1:hover{
background-color: red;
}
@keyframes ani1 {
from{
background-color: green;
}
100%{
background-color: red;
}
}
示例2：颜色、大小的变化
CSS
.d2{
display: flex;
flex-flow: row;
width: 300px;
justify-content: space-evenly;
}
.trans,
.trans1{
width: 100px;
height: 100px;
background-color: green;
}
.trans1{
transition: background-color 2s ease-in, width 2s ease, height 2s ease;
}
.trans:hover{
animation: 2s "ani1" 2 ease-in alternate;
}
.trans1:hover{
background-color: red;
width: 150px;
height: 150px;
}
@keyframes ani1 {
from{
width: 100px;
height: 100px;
background-color: green;
}
100%{
width: 150px;
height: 150px;
background-color: red;
}
}
示例3：与JS一起使用
CSS:
p {
padding-left: 60px;
}
.foo{
position: absolute;
top: 0;
left: 0;
}
#foo1 {
border-radius: 50px;
width: 50px;
height: 50px;
background: #c00;
transition: all 1s;
}
#foo2 {
border-radius: 30px;
width: 30px;
height: 30px;
background: green;
}
JS:
<script>
var f1 = document.getElementById('foo1');
var f2 = document.getElementById('foo2');
document.addEventListener('click', function(ev){
f1.style.left = (ev.clientX-25)+'px';
f1.style.top = (ev.clientY-25)+'px';
f2.style.left = (ev.clientX-25)+'px';
f2.style.top = (ev.clientY-25)+'px';
},false);
</script>
HTML:
<p>随便点击某处来移动球</p>
<div id="foo1" class="foo"></div>
<div id="foo2" class="foo"></div>
检测过渡是否完成
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是transitionend，在 WebKit 下是webkitTransitionEnd。
transitionend 事件提供两个属性:
propertyName：字符串，指示已完成过渡的属性。elapsedTime：浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受transition-delay。
可以用 element.addEventListener() 方法来监听这个事件：
示例：
CSS:
.trans1{
transition: background-color 2s ease-in;
}
JS:
var el = document.getElementById("tra1");
el.addEventListener("transitionend",listener);
el.addEventListener("transitionstart",listener);
el.addEventListener("transitionrun",listener);
el.addEventListener("transitioncancel",listener);
var ul = document.getElementById("ul");
function listener(event){
var li = document.createElement("li");
switch (event.type){
case "transitionstart":
li.innerHTML = "时间：" + event.elapsedTime + ", 属性：" + event.propertyName + "开始了";
break;
case "transitionend":
li.innerHTML = "时间：" + event.elapsedTime + ", 属性：" + event.propertyName + "结束了";
break;
case "transitionrun":
li.innerHTML = "时间：" + event.elapsedTime + ", 属性：" + event.propertyName + "正在运行,";
break;
case "transitioncancel":
li.innerHTML ="时间：" + event.elapsedTime + ", 属性：" + event.propertyName + "取消了,";
break;
default:
break;
}
ul.appendChild(li);
}
当transition-property与transition-duration不一致
示例：
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}
div {
transition-property: opacity, left;
transition-duration: 3s, 5s, 2s, 1s;
}
等价：
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}
div {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}
