浏览 190
分享
6 变换与动画
【强制】 使用 transition
定义属性时应遵循以下顺序:
[ transition-property ]
:检索或设置对象中的参与过渡的属性;[ transition-duration ]
:检索或设置对象过渡的持续时间;[ transition-timing-function ]
:检索或设置对象中过渡的动画类型;[ transition-delay ]
:检索或设置对象延迟过渡的时间;
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
如果顺序错乱,在某些安卓浏览器上会让动画失效。
示例:
/* Not so great */
.selector {
transition: color .2s 0 ease-in;
}
/* Better */
.selector {
transition: color .2s ease-in 0;
}
【建议】 尽可能在浏览器能高效实现的属性上添加过渡和动画:
在可能的情况下应选择这样四种变换:
transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;
评论列表