介绍
实验中的功能。 可动画属性列表
是一个 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;
}