transition-delay 设置过渡延迟时间
transition-duration 设置完成过渡效果需要花费的时间
transition-timing-function 设置过渡效果的速度曲线
transition 设置过渡属性的复合写法
transform-origin 设置旋转元素的基点位置(不常用,了解即可)
transform-style 让转换的子元素保留3D转换(不常用,了解即可)
opacity 设置元素的透明度
@keyframes 设置关键帧动画
animation 设置动画属性
transition-property:all | none | <property>[<property>]
transiton-duration:<time>[,<time>]
<time>用于指定多度持续的时间,默认值为0,如果存在多个属性值,以逗号“,”隔开
transition-delay:<time>[,<time>]
<time>用于指定多度持续的时间,默认值为0,如果存在多个属性值,以逗号“,”隔开
transition-timing-function:linear | ease | ease-in | easse-out | ease-in-out | cubicbezier(x1,y1,x2,y2)[,linear | ease-in | easse-out | ease-in-out |cubicbezier(x1,y1,x2,y2)]
例如:
在CSS3中新增了元素的过渡效果属性:transitiontransition也是一个复合属性,包括四个值分别是:
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
基本使用如下:
多个属性可以单独设置,也可以通过transition一起设置
例如:点击按钮时,方块宽度由100px变成200px,延迟1s,过渡时间用了2s,速度是按照cubic-bezier设定的一个速度
以上就是transition的基本使用!