过渡

107 阅读1分钟

1. 作用:

使元素从一个样式逐渐变为另外一个样式

2. 过渡必须有触发事件

鼠标悬停,点击等

3. 过渡的属性-必须

transition-property:属性1,属性2...;
可以过渡的属性:
①取值为数值
②取值为颜色
③阴影 text-shadow:; box-shadow:;
④背景渐变 background-image:;
⑤转换 transform:;
简写all

4. 过渡的持续时间-必须 单位s/ms 默认0s/0ms

transition-duration:时间1,时间2,.....;
1s=1000ms

5. 过渡的速度变化类型-可选

transition-timing-function:;
ease 默认值 先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 匀速

6. 过渡的延迟时间-可选

单位s/ms 默认0s/0ms
transition-delay:;
可以取负值,表示把这段时间的效果跳过

7. 简写

transition:  all     持续时间 速度变化类型 延迟时间;
             必须      必须       可选      可选 
                      s/ms                 s/ms