CSS（五）CSS动画-transition简介

最新推荐文章于 2025-03-22 01:30:05 发布

原创最新推荐文章于 2025-03-22 01:30:05 发布 · 831 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#CSS

CSS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了CSS3中的transition属性，它允许元素从一种样式平滑过渡到另一种。内容涵盖了概念、语法、基本用法及浏览器兼容性，帮助理解CSS动画中的过渡效果。

这是一个系列的文章，你也可以查看其他文章：

0、CSS-预热篇

1、CSS（一）详解position

2、CSS（二）transform

3、CSS（三）flex布局（flex弹性布局详解）

4、CSS（四）详解Grid布局

5、CSS（五）CSS动画-transition简介

6、CSS（六）CSS动画-animation简介

7、CSS（七）两栏布局详解

一、概念

一个状态向另一个状态的过渡。

在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。（阮一峰）

二、语法

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

transition-property（规定设置过渡效果的 CSS 属性的名称。）
transition-duration（规定完成过渡效果需要多少秒或毫秒。）
transition-timing-function（规定速度效果的速度曲线。默认不是匀速的，而是逐渐放慢，这叫做ease。）
transition-delay（定义过渡效果何时开始。）

transition: property duration timing-function delay;

每个单属性转换都描述了应该应用于单个属性的转换（或特殊值all和none）。

这包括（部分注释来自腾讯云《css3过渡》）：

零或一个值，表示转换应适用的属性。这可能是以下任何一种：
- 关键字none
- 关键字all
- 命名 CSS 属性的 <custom-ident> （CSS数据类型表示作为任意用户定义的字符串的标识符。它是区分大小写的，并且在各种情况下禁止某些值以防止含糊不清。最常见的如width等属性）。
零或一个 <single-transition-timing-function> 值表示要使用的过渡函数。（注：single-transition-timing-function其取值是一个三次方的贝塞尔曲线的值。）
零，一或两个 <time> 值。可以解析为时间的第一个值被分配给 transition-duration，并且可以解析为时间的第二个值被分配给transition-delay。

标准语法（MDN）

<single-transition>#
where
<single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

where
<single-transition-property> = all | <custom-ident>
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

三、基本用法举例（改编自w3c）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: yellow;
            transition: height 2s;
            -moz-transition: height 2s;
            /* Firefox 4 */
            -webkit-transition: height 2s;
            /* Safari and Chrome */
            -o-transition: height 2s;
            /* Opera */
        }
        div:hover {
            height: 300px;
        }
    </style>
</head>

<body>
    <div></div>
    <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
    <p><b>注释：</b>本例在 Internet Explorer 10-中无效。</p>
</body>
</html>

四、兼容性