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

一、过度概述

过度概述

  - 使得 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过渡(概述、过度子属性)

转载于:https://blog.51cto.com/jasonteach/1754431