CSS Transition 过渡

前言

  • CSS3 中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用 Flash 动画或 JavaScript。
属性 描述 CSS 备注 🔗
transition 简写属性,用于在一个属性中设置四个过渡属性 3 🔗
transition-property 规定应用过渡的 CSS 属性的名称 3 🔗
transition-duration 定义过渡效果花费的时间。默认是 0 3 🔗
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease” 3 🔗
transition-delay 规定过渡效果何时开始。默认是 0 3 🔗
  • 用鼠标移过下面的元素:



    CSS3

    过渡


1、过渡

  • CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

  • 要实现这一点,必须规定两项内容:

    • 指定要添加效果的 CSS 属性。
    • 指定效果的持续时间。

1.1 transition-property

  • 语法

    1
    transition-property: none | all | property;
  • 属性值

描述
none 没有属性会获得过渡效果
all 所有属性都将获得过渡效果
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔

1.2 transition-duration

  • 语法

    1
    transition-duration: time;
  • 属性值

描述
time 规定完成过渡效果需要花费的时间(以秒或毫秒计)。 默认值是 0,意味着不会有效果

1.3 transition-timing-function

  • 语法

    1
    transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);
  • 属性值

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0, 0, 1, 1))
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25, 0.1, 0.25, 1))
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42, 0, 1, 1))
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0, 0, 0.58, 1))
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42, 0, 0.58, 1))
cubic-bezier(n, n, n, n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

1.4 transition-delay

  • 语法

    1
    transition-delay: time;
  • 属性值

描述
time 指定秒或毫秒数之前要等待切换效果开始

1.5 实例

  • 应用于宽度属性的过渡效果,时长为 2 秒。如果未指定的期限,transition 将没有任何效果,因为默认值是 0。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
    div {
    width: 100px;
    height: 100px;
    background: red;

    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
    }
    div:hover {
    width: 300px;
    }
    </style>
    1
    <div></div>
  • 效果



  • 鼠标放在元素上查看过渡效果。

2、多项改变

  • 要添加多个样式的变换效果,添加的属性由逗号分隔。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
    div {
    width: 100px;
    height: 100px;
    background: red;

    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    }
    div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    }
    </style>
    1
    <div></div>
  • 效果



  • 鼠标放在元素上查看过渡效果。

3、简写

属性 描述 CSS 备注 🔗
transition 简写属性,用于在一个属性中设置四个过渡属性 3 🔗
  • transition 属性设置元素当过渡效果,四个简写属性为:

    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay
  • 注意:始终指定 transition-duration 属性,否则持续时间为 0,transition 不会有任何效果。

  • 语法

    1
    transition: property duration timing-function delay;
  • 属性值

描述
transition-property 指定 CSS 属性的 name,transition 效果
transition-duration transition 效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定 transition 效果的转速曲线
transition-delay 定义 transition 效果开始的时候
  • 简写实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
    div {
    width: 100px;
    height: 100px;
    background: red;

    transition: width 1s linear 2s; /* Safari */
    -webkit-transition: width 1s linear 2s;
    }
    div:hover {
    width: 200px;
    }
    </style>
    1
    <div></div>
  • 全写实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
    div {
    width: 100px;
    height: 100px;
    background: red;

    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s; /* Safari */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
    }
    div:hover {
    width: 200px;
    }
    </style>
  • 效果



  • 鼠标放在元素上查看过渡效果,注意过渡效果需要等待两秒后才开始。

4、浏览器支持

属性
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、过渡
    1. 2.1. 1.1 transition-property
    2. 2.2. 1.2 transition-duration
    3. 2.3. 1.3 transition-timing-function
    4. 2.4. 1.4 transition-delay
    5. 2.5. 1.5 实例
  3. 3. 2、多项改变
  4. 4. 3、简写
  5. 5. 4、浏览器支持
隐藏目录