过度效果语法
语法:
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
默认值:看每个独立属性
取值:
[ transition-property ]: 检索或设置对象中的参与过渡的属性
[ transition-duration ]: 检索或设置对象过渡的持续时间
[ transition-timing-function ]: 检索或设置对象中过渡的动画类型
[ transition-delay ]: 检索或设置对象延迟过渡的时间
- transition-property
语法
transition-property:all | none | property[ ,property ]*
默认值:all
取值:
all: 所有可以进行过渡的css属性
none: 不指定过渡的css属性
property: 指定要进行过渡的css属性
说明
检索或设置对象中的参与过渡的属性。
如果提供多个属性值,以逗号进行分隔
- transition-duration
语法
transition-duration:time[ ,time ]*
默认值:0
取值:
time: 指定对象过渡的持续时间
说明
检索或设置对象过渡的持续时间。
如果提供多个属性值,以逗号进行分隔。
-
transition-time-function
语法transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) ]*
默认值:ease
说明
检索或设置对象中过渡的动画类型。
如果提供多个属性值,以逗号进行分隔。
取值
linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
- transition-delay
语法
transition-delay:time[ ,time ]*
默认值:0
取值
time: 指定对象过渡的延迟时间
说明
检索或设置对象延迟过渡的时间。
如果提供多个属性值,以逗号进行分隔
缩写方式:
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分方式:
transition-property:border-color, background-color, color; transition-duration:.5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s;
动画animation
animation: name duration timing-function delay iteration-count direction;
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
- 关键帧语法
@KEYFRAMES写法
@keyframes IDENT {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }
}