Css3之高级-6Css过渡(概述、过度子属性)_html/css_WEB-ITnose

一、过度概述

过度概述

- 使得 CSS 的属性值在一段时间内平滑的过渡

- 比如，鼠标悬停后，背景色在 1s 之内，由白色平滑的过渡为红色

- 指定 4 个要素

- 指定过渡属性，如 background、color等

- 指定过渡所需时间

- 指定过渡函数，即过渡的速度、方式等

- 指定过渡延迟时间，表示开始执行的时间

- 触发过渡

- 通过用户的行为触发，如点击、悬浮等

过渡示例

触发过渡

- 过渡由用户的行为(如点击、悬浮等)触发

- 由元素的状态变化触发

- :hover、:active、:focus 等

- 由JavaScript 代码触发

二、过度子属性

过渡属性 transition-property

- transition-property 属性规定应用过渡效果的 CSS 属性的名称

- 当指定的 CSS 属性改变时，过渡效果将开始

- 语法

- transition-property: none | all | property;

- 可以设置过渡的属性

- 颜色属性

- 取值为数值的属性

- 转换属性

- 渐变属性

- visibility属性

- 阴影属性

过渡时间 transition-duration

- transition-duration 属性规定完成过渡效果需要花费的时间

- 以秒或毫秒计

- 语法

- transition-duration: s | ms;

- 默认值是0，意味着不会有效果

- 必须设置 transition-duration 属性，否则时长为0，就不会产生过渡效果

过渡函数 transition-timing-function

- transition-timing-function 属性规定过渡效果的速度曲线

- 取值为预定义函数或者贝塞尔曲线

- 语法

- transition-duration: function;

- 预定义函数

- ease: 默认值，慢速开始，快速变快，然后慢速结束

- linear: 以相同速度开始至结束

- ease-in:以慢速开始，加速效果

- ease-out:以慢速结束，减速效果

- ease-in-out:以慢速开始和结束，先加速再减速

过渡延迟 transition-delay

- transition-delay 属性规定过渡效果何时开始

- 即，当改变元素属性后多长时间开始执行过渡效果

- 以秒或毫秒计

- 语法

- transition-delay: s | ms;

简写属性 transition

- transition 属性是一个简写属性，用于设置四个过渡属性

- 语法

- transition: property duration timing-function delay;

多个过渡效果

- 为过渡子属性设置多个值，多个值之间用逗号隔开

- 为 transition 属性设置多个值，多个值之间用逗号隔开

总结：本章内容主要介绍了 Css过渡(概述、过度子属性)