transition-delay 设置过渡延迟时间
transition-duration 设置完成过渡效果需要花费的时间
transition-timing-function 设置过渡效果的速度曲线
transition 设置过渡属性的复合写法
transform-origin 设置旋转元素的基点位置(不常用,了解即可)
transform-style 让转换的子元素保留3D转换(不常用,了解即可)
opacity 设置元素的透明度
@keyframes 设置关键帧动画
animation 设置动画属性
在CSS3中新增了元素的过渡效果属性:transitiontransition也是一个复合属性,包括四个值分别是:
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
基本使用如下:
多个属性可以单独设置,也可以通过transition一起设置
例如:点击按钮时,方块宽度由100px变成200px,延迟1s,过渡时间用了2s,速度是按照cubic-bezier设定的一个速度
以上就是transition的基本使用!
可以。
如果过渡时间或过渡延迟时间不足1s,小数点前的0可以省略。以下两行代码等价。
transition: all 0.5s
transition: all .5s
资料来源:《HTML5布局之路》