CSS3系列 14 过渡时间

最新推荐文章于 2025-05-04 16:57:20 发布
最新推荐文章于 2025-05-04 16:57:20 发布
阅读量1.3k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43422005/article/details/118971856
本文详细介绍了CSS3过渡时间的概念，包括过渡基础知识、动画属性、元素状态、过渡效果、过渡时间设置、过渡速率、延迟过渡以及组合定义等，并提供了丰富的代码示例，帮助读者深入理解CSS3过渡效果的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

过渡时间

基础知识

在了解CSS过渡时间之前，你应该先了解一下CSS的变形动画，可以参考之前的一篇博客。

我们的元素在属性发生变化时，如果没有特地的为它设置过渡时间，整个变化过程其实是以毫秒级别进行的，过程非常快，肉眼不易察觉。

故我们要学习CSS过渡时间，来让它的变化过程更加平滑。

动画属性

不是所有css属性都有过渡效果，查看支持动画的CSS属性 ，一般来讲有中间值的属性都可以设置动画如宽度、透明度等。

可以看一下下面这个例子，比如边框的样式就不支持过渡效果，而其他的诸如背景颜色，高度宽度等等都是支持过渡效果的。

过渡属性

可以看到，在鼠标放上去的瞬间，边框的样式就发生变化了，而不是再跟随过渡时间进行渐变。

而其他的属性，诸如背景颜色，圆角等都是跟随过渡时间进行渐变的。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
        }

        div {
            height: 50px;
            width: 50px;
            background: #747d8c;
            border: 10px solid #ff6348;
            /* 添加过渡时间 1s */
            transition: 1s;
        }

        body:hover div {
            background: #5352ed;
            border: 10px dotted #ffa502;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            transform: translate(100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

元素状态

初始形态

指当页面加载后的样式状态，下面是表单设置的初始样式。

image-20200721200023223

变化形态

指元素由初始状态变化后的状态，比如鼠标放上、表单获得焦点后的形态。

输入框动画过渡

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #2c3e50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            • padding: 20px;
        }

        input {
            border: solid 5px #e67e22;
            height: 60px;
            width: 400px;
            margin-bottom: 20px;
            transition: 2s;
        }

        input:hover {
            border: solid 5px #000 !important;
        }

        input:focus {
            background: #e67e22;
        }

        input:checked {
            position: relative;
            width: 60px;
            height: 60;
            border: none;
        }

        input:checked::before {
            content: '⩗';
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3em;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            box-sizing: border-box;
            background: #3498db;
        }
    </style>
</head>

<body>

    <input type="text">
    <input type="checkbox" checked>

</body>

</html>

过渡效果

transition-property

用于设置哪些属性应用过渡效果。

  • 默认值为all即所有属性都发生过渡效果

  • 多个属性使用逗号分隔

当我们使用该选项时，注意要和transition-duration搭配使用才能生效，这个才是非简写的过渡时间。

transition只是一种简写形式，如果使用transition-duration与transition进行搭配使用，则不会生效transition-duration。

属性设置

注意看，下面的这张图片里transition-duration只设置了圆角与透明度，其他的诸如宽度高度背景颜色等均未设置，所以在鼠标放上去的一瞬间未设置的属性立刻产生了变化，而圆角和透明度是随着过渡时间渐渐变化的。

过渡属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
        }

        main {
            width: 400px;
            height: 400px;

            display: flex;
            justify-content: center;
            align-items: center;

        }

        div {
            width: 100px;
            height: 100px;
            background: #f39c12;
            transition-property: border-radius, opacity;
            /* 这个才是真正的设置过渡时间，
                        transition只是简写形式 */
            transition-duration: 1s;
            opacity: .5;

        }

        main:hover div {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background: #2ecc71;
            opacity: 1;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>

</html>

禁用属性

当设置transition-property:none;后，所有的变化形态均不会跟随过渡时间发生变化。

也就是说全部都是瞬发完成。

过渡属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
        }

        main {
            width: 400px;
            height: 400px;

            display: flex;
            justify-content: center;
            align-items: center;

        }

        div {
            width: 100px;
            height: 100px;
            background: #f39c12;
            transition-property: none;
            /* 这个才是真正的设置过渡时间，
                        transition只是简写形式 */
            transition-duration: 1s;
            opacity: .5;

        }

        main:hover div {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background: #2ecc71;
            opacity: 1;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>

</html>

结束事件

transitionend

用于控制过渡结束后执行的JS事件，简写属性会触发多次如 border-radius 会触发四次事件，不难理解因为可以为border-bottom-left-radius 等四个属性独立设置过渡，所以就会有四次事件。

属性说明
propertyName结束过渡样式
elapsedTime过渡需要的时间
pseudoElement过渡的伪元素
isTrustedtrue:用户触发，false:脚本触发

我们只需要有JS来监听该事件即可，如下图。

当我们检测的<div>标签过渡时间结束后触发了transitionend事件，然后才显示出了恭候多时的字样。

过渡属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background-color: #57606f;
        }

        main {
            width: 400px;
            height: 400px;

            display: flex;
            justify-content: center;
            align-items: center;

        }

        div {
            width: 100px;
            height: 100px;
            background: #f39c12;

            transition-duration: 1s;

            position: relative;


        }

        div:after {
            content: "恭候多时";
            color: #fff;
            width: 100%;
            font-size: 1.4em;

            display: flex;
            justify-content: center;
            align-items: center;

            position: absolute;
            bottom: -50px;
            transform: scale(0);
            transition-duration: 1s;

        }

        main:hover div {
            transform: rotate(360deg);
        }

        main:hover div.show-after::after {
            transform: scale(1) skew(360deg);
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>

<script>
    // 检测div的 transitionend 事件
    document.querySelector('div').addEventListener('transitionend', function (e) {
        console.log(e);
        // 给div添加class为show-after
        document.querySelector('div').className = 'show-after';
    })
</script>

</html>

此时查看一下浏览器控制台，正好对应上表中的属性。

image-20200721205754261

过渡时间

transition-duration

用于设置过渡时间，需要注意以下几点：

  • 可使用单位为 ms毫秒、s秒
  • 默认值为0s不产生过渡效果
  • 一个值时，所有属性使用同样的时间
  • 二个值时，奇数属性使用第一个，偶数属性使用第二个
  • 变化属性数量大于时间数量时，后面的属性再从第一个时间开始重复使用

统一时间

让所有动画的变形在统一时间内完成：

统一时间

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #2c3e50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding: 80px;
        }

        main {
            width: 400px;
            height: 400px;
        }

        div {
            width: 150px;
            height: 150px;
            background-color: #34495e;
            border-radius: 50%;
            opacity: 0.2;
            transition-property: background-color, transform, opacity, border-radius;
            transition-duration: 3s;
        }

        div:hover {
            opacity: 1;
            border-radius: 0;
            transform: scale(2) rotate(180deg);
            background-color: #e67e22;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>

</html>

两个时间

下面共有四个属性并设置了两个时间值，1,3属性使用第一个值，2,4属性使用第二个值。

...
div {
  width: 150px;
  height: 150px;
  
  border-radius: 50%;
  opacity: 0.2;
  transition-property: background-color, transform, opacity, border-radius;
  transition-duration: 200ms, 5s;
}
...

多个时间

下面共有四个属性并设置了三个时间值，1,2,3属性使用1,2,3时间值，第四个属性再从新使用第一个时间值。

...
div {
  width: 150px;
  height: 150px;
  
  border-radius: 50%;
  opacity: 0.2;
  transition-property: background-color, transform, opacity, border-radius;
  transition-duration: 200ms, 5s, 2s;
}
...

不同时间

可以为初始与变化状态设置不同的时间。

下面是将hover设置为3s，当鼠标放上时变化时间为3s。

初始设置为1s即表示变化到初始状态需要1s。

不同时间

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #2c3e50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding: 80px;
        }

        main {
            width: 400px;
            height: 400px;
        }

        div {
            width: 150px;
            height: 150px;
            background-color: #e67e22;
            border-radius: 50%;
            transition-property: background-color, transform, opacity, border-radius;
            /* 结束时间，变回初始状态  如果只有该时间，则过渡时间也采用它 */
            transition-duration: 1s;
        }

        div:hover {
            border-radius: 0;
            transform: scale(2) rotate(180deg);
            background-color: #e67e22;
            /* 过渡时间 */
            transition-duration: 3s;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>

</html>

过渡速率

transition-timing-function

用于设置整体过渡效果的速度，可在 https://cubic-bezier.com 网站在线体验效果差异。

默认参数

以下是常见的transition-timing-function过渡效果：

值描述
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 函数中定义自己的值

差异对比

我们用linear和ease来做一个对比，左边是linear，右边是ease。

其实他们的过渡时间都是一模一样的，只是视觉上有所差异。

过渡属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            width: 100vw;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        main {
            height: 400px;
            width: 400px;

            display: flex;
            justify-content: center;
            align-items: center;

            border: 1px solid #ddd;
        }

        main div {
            height: 100px;
            width: 100px;
            margin: 20px;
            transition-duration: 3s;
        }

        main div:nth-child(1) {
            background-color: #ff4757;
            transition-timing-function: linear;
        }

        main div:nth-child(2) {
            background-color: #3742fa;
            transition-timing-function: ease;
        }

        main:hover div {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }
    </style>

</head>

<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>

</html>

贝塞尔曲线

其实不管是linear或者是ease都是由贝塞尔曲线来完成的。

我们需要设置四个值 cubic-bezier(<x1>, <y1>, <x2>, <y2>)来控制曲线速度，可在 https://cubic-bezier.com 网站在线体验效果。

image-20200721212338537

如以下是我自己调的一个数值，右边的那个，对比的是linear。

过渡属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            width: 100vw;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        main {
            height: 400px;
            width: 400px;

            display: flex;
            justify-content: center;
            align-items: center;

            border: 1px solid #ddd;
        }

        main div {
            height: 100px;
            width: 100px;
            margin: 20px;
            transition-duration: 3s;
        }

        main div:nth-child(1) {
            background-color: #ff4757;
            transition-timing-function: linear;
        }

        main div:nth-child(2) {
            background-color: #3742fa;
            transition-timing-function: cubic-bezier(.17, .67, .88, -0.47);
        }

        main:hover div {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }
    </style>

</head>

<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>

</html>

步进速度

过渡使用阶梯化呈现，有点像现实生活中的机械舞，下面是把过渡分3步完成。

选项说明
steps(n, start)设置n个时间点，第一时间点变化状态
steps(n, end)设置n个时间点，第一时间点初始状态
step-start等于steps(1,start)，可以理解为从下一步开始
step-end等于steps(1,end)，可以理解为从当前步开始

start总是先走，end总是后走。

过渡属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            width: 100vw;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        main {
            height: 400px;
            width: 800px;

            display: flex;
            border: 1px solid #ddd;

            position: relative;
        }

        main div {
            width: 200px;
            height: 100%;
            border: 1px solid #ddd;
        }

        main::after {
            content: "START";
            height: 30%;
            width: 25%;
            background: #ff4757;
            color: #fff;
            font-size: 2em;
            /* 过渡时间2s */
            transition: 2s;
            /* 相当于把2s分成三步走 */
            transition-timing-function: steps(3, start);

            position: absolute;
            top: 0;

            display: flex;
            justify-content: center;
            align-items: center;


        }

        main::before {
            content: "END";
            height: 30%;
            width: 25%;
            background: #70a1ff;
            color: #fff;
            font-size: 2em;
            /* 过渡时间2s */
            transition: 2s;
            /* 相当于把2s分成三步走 */
            transition-timing-function: steps(3, end);

            position: absolute;
            bottom: 0;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        main:hover::before {
            transform: translateX(600px);
        }

        main:hover::after {
            transform: translateX(600px);
        }
    </style>

</head>

<body>
    <main>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </main>
</body>

</html>

时钟效果

其实步进这样一帧一帧的来走非常时候做时钟，那么这里就做一个非常简陋的时钟吧。

过渡属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            width: 100vw;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        main {
            height: 400px;
            width: 400px;
            display: flex;
            position: relative;
            background: #ffa502;
            box-shadow: 3px 3px 3px #2f3542;
            border-radius: 50%;
        }

        main::after {
            content: "";
            height: 20px;
            width: 20px;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #1e90ff;
        }

        main::before {
            content: "";
            height: 48%;
            width: 6px;
            position: absolute;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0);
            background: #1e90ff;
            transition-duration: 60s;
            transition-timing-function: steps(60, start);
            transform-origin: bottom;
        }

        main:hover::before {

            transform: translateX(-50%) rotate(360deg);

        }
    </style>

</head>

<body>
    <main></main>
</body>

</html>

延迟过渡

transition-delay

用于设置延迟过渡的时间。

  • 默认为0s即立刻开始过渡
  • 值可以为负数
  • 变化属性数量大于时间数量时，后面的属性再从第一个时间开始重复使用

基本使用

下面设置了延迟时间为1s，当鼠标放上时产生变化。

延迟1s

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #2c3e50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding: 80px;
        }

        main {
            width: 400px;
            height: 400px;
        }

        div {
            width: 150px;
            height: 150px;
            background-color: #e67e22;
            border-radius: 50%;
            transition-property: background-color, transform, opacity, border-radius;
            transition-duration: 1s;
            transition-delay: 1s;
        }

        div:hover {
            border-radius: 0;
            transform: scale(2) rotate(180deg);
            background-color: #e67e22;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>

</html>

多值延迟

可以设置不同属性的延迟时间。

多值延迟

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #2c3e50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding: 80px;
        }

        main {
            width: 400px;
            height: 400px;
        }

        div {
            width: 150px;
            height: 150px;
            background-color: #fff;
            /* 一一对应 */
            transition-property: background-color, transform, border-radius;
            transition-duration: 1s, 2s, 3s;
            transition-delay: 1s, 3s, 5s;
        }

        div:hover {
            border-radius: 50%;
            transform: scale(2) rotate(180deg);
            background-color: #e67e22;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>

</html>

使用负值

下例圆角属性的过渡时间为4s，设置延迟为 -4s，表示鼠标放上时直接显示在4s上的效果。如果设置为-2s显示圆角变形一半的效果。

即对圆角来说不产生过渡，是瞬发的。

负值延迟

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #2c3e50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding: 80px;
        }

        main {
            width: 400px;
            height: 400px;
        }

        div {
            width: 150px;
            height: 150px;
            background-color: #fff;

            transition-property: background-color, transform, border-radius;
            transition-duration: 1s, 2s, 4s;
            transition-delay: 1s, 2s, -4s;
        }

        div:hover {
            border-radius: 50%;
            transform: scale(2) rotate(180deg);
            background-color: #e67e22;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>

</html>

组合定义

transition

可以使用transition 指令将过渡规则统一设置，需要注意以下几点。

  • 必须设置过渡时间
  • 延迟时间放在逗号或结束前
  • 如果只设置一个数值，那么该数值会认为是过渡时间
transition: border-radius linear 2s 0s,
background 2s 2s,
width linear 2s 4s,
height linear 2s 4s;
/* 参与过渡的动画 贝塞尔曲线 过渡时间 延迟时间 */

点赞案例

过渡属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #ecf0f1;
        }

        div {
            position: relative;
            width: 100px;
            height: 100px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div i.fa {
            font-size: 100px;
            position: absolute;
            transition: all .5s;
            color: #ddd;
        }

        div.heart i.fa {
            font-size: 400px;
            color: #e74c3c;
            opacity: 0;
        }

        div.heart i.fa:nth-child(2) {
            font-size: 80px;
            color: #e74c3c;
            opacity: 1;
        }
    </style>
</head>

<body>

    <div onclick="heart()">
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
    </div>


</body>
<script>
    function heart() {
        $("div").toggleClass('heart');
    }
</script>

</html>
CSS3 过渡效果的过渡时间设置
前端视界的博客
04-09 1037
在当今的网页设计中，用户体验至关重要。CSS3 过渡效果为网页增添了生动性和交互性，而过渡时间的设置是控制过渡效果节奏和体验的关键因素。本文的目的是深入研究 CSS3 过渡效果的过渡时间设置，详细讲解其原理、操作步骤、实际应用等方面。范围涵盖了过渡时间设置的基本概念、核心算法、数学模型，以及通过实际项目案例来展示如何在实际开发中运用这些知识。本文首先对 CSS3 过渡效果的过渡时间设置的背景进行介绍，包括目的、预期读者和文档结构。
CSS 之 过渡动画（transition）
weixin_45092437的博客
04-25 9731
transition属性用来设置元素的过渡动画，是过渡属性的简写形式，属性值可以包含四部分transition-property、transition-duration、ransition-timing-function和transition-delay，分别表示过渡动画的CSS属性、过渡动画所需的时间、过渡动画执行的速度曲线和过渡动画执行前需要等待的时间。过渡相关事件：transitionrun、transitionstart、transitionend、transitioncancel。
CSS显示属性上的过渡
p15097962069的博客
12-09 1472
我目前正在设计CSS“巨型下拉菜单”-基本上是一个常规的仅CSS下拉菜单，但其中包含不同类型的内容。 目前， 似乎CSS 3过渡不适用于'display'属性 ，即，您不能执行从displa
CSS过渡效果的控制与优化
最新发布
weixin_36474966的博客
05-04 332
本文深入探讨了CSS过渡效果的关键属性：过渡持续时间（transition-duration）、过渡属性（transition-property）、过渡时间函数（transition-timing-function），以及如何监听过渡结束事件（transitionend）。通过具体的代码示例，展示了如何设置属性的过渡效果，并详细讲解了如何控制过渡的起始和结束时的时序，以及如何处理浏览器中的不匹配情况。此外，文章还提供了关于用户体验和过渡效果时长的建议。
Css3动画变化时间,CSS3 5个时间函数动画对比
weixin_33564753的博客
08-04 571
CSS语言：CSSSCSS确定* {-webkit-transition: opacity 0.5s ease;transition: opacity 0.5s ease;}body {background: #232a3e;background-image: url("http://frolovoleg.ru/images/16.svg");}.timeFunctions {color: rgb...
CSS 过渡、动画
DevilAngelia的博客
05-06 184
hover过渡效果 圆圈内收缩 <style> html { --size: 1.5rem; --color: #5fa04e; } .box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; } .hovers {
css3上下文过渡切换 css3上下文过渡切换网页特效.zip
11-17
在现代网页设计中，CSS3（层叠样式表第三版）带来了许多强大的功能，其中之一就是上下文过渡切换。这种特效可以提升用户体验，使网页元素在不同的状态之间平滑过渡，而不是突然变化。在这个名为“css3上下文过渡切换...
纯CSS3带过渡动画效果分页条代码.zip
07-11
纯CSS3带过渡动画效果的分页条是网页设计中常用的一种组件，尤其在内容较多、需要分页展示的场景下，如企业网站和商城网站。这个代码示例利用了CSS3的新特性，实现了无需JavaScript就能完成的动态效果，提高了用户...
CSS3实现页面过渡效果.zip
11-17
这个“CSS3实现页面过渡效果.zip”压缩包可能包含了一系列示例和教程，用于演示如何利用CSS3的过渡效果来提升网页的视觉吸引力。 首先，CSS3过渡效果主要通过`transition`属性来实现。这个属性可以设置四个子属性：...
css3图文列表过渡动画效果.zip
11-17
在前端开发中，CSS3（层叠样式表第三版）为网页设计师提供了强大的新功能，特别是在动画和过渡效果方面。这个“css3图文列表过渡动画效果.zip”文件很可能包含了一系列示例，展示了如何利用CSS3来创建吸引人的、动态...
纯CSS3竖直蛇形时间轴特效代码
03-20
纯CSS3实现的竖直蛇形时间轴特效，利用了CSS3的特性，如伪元素、边框半径、过渡效果等，创建出动态、美观的时间轴，无需JavaScript的介入，简化了开发流程，同时提高了性能。 一、基本结构与样式 1. HTML结构： ...
【CSS】过渡属性
LuWeien的博客
11-30 414
transition：要发生过度的属性 持续的时间 延迟时间 运动状态。display：none和visibility：hidden不可用。原因：这两个是极端值，只有消失和出现两种状态，不能过度。/* 是极端值 只有消失和出现两个状态 不能过渡 */解决：使用opcity：0 这个有中间值。/* 要发生过渡的css属性 */所以过渡属性要写在元素的默认状态中。/* 过渡的持续时间 *//* 过渡的延迟时间 *//* 默认 先快后慢*/过渡transition。/* 有中间值 */
css过渡时间怎么显示,CSS3 电影场景（时间过渡）切换特效
weixin_42398635的博客
08-04 401
CSS语言：CSSSCSS确定@keyframes sway {to {transform: rotate(-14deg);}}@keyframes remove {from {opacity: 1;}to {opacity: 0;}}@keyframes dissolve {0% {background: transparent;}45% {background: #000;}55% {back...
php设置控件display效果,CSS中display实现淡入淡出过渡效果的实例
weixin_31703753的博客
03-12 285
display实现淡入淡出过渡效果Titlep {position: relative;}input {/*按钮样式*/cursor: pointer;border: none;outline: none;background: #34BC9D;color: #fff;height: 40px;}img {position: absolute;transition: 1s;left: 0;top:...
关于CSS动画过渡的问题
zh5220909的博客
07-08 590
最近在用VUE做弹出框，想做一个渐入渐出的效果。 先来看看平常动画的实现 .div{ position:absolute; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .div:hove
CSS3简单运用过渡元素（transition）
AIMing_byte的博客
01-12 1584
概念：在CSS3中，我们可以使用transition属性将元素的某一个属性从“”在指定的时间内平滑地过渡到“”，从而实现动画效果。CSS3变形（transform)呈现的仅仅是一个结果，而CSS过渡（transition）呈现的是一个过程。这个所谓的过程，通俗来说就是一种动画变化过程，如渐渐显示，渐渐隐藏，动画快慢等实例：指定单个属性
css transition过渡 与 display 冲突问题
TheobaldWong的博客
12-29 1096
问题描述： 当改变元素display属性时，过渡transition将会失效，原因是display 为none时，页面doc流中不会存在该元素，而transition无法在doc流中做到无中生有，transition改变的只是前后两个状态。 解决办法： 1. 使用 width 或者 height 属性 2. 可用 visibility 属性 3. 使用opacity 属性 ...
css3 过渡
平安喜乐
04-06 427
过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式。
css中动画和display踩过的坑
qq_43427385的博客
09-18 1781
动画的过渡效果一遇到display就没有效果，是因为： display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。 所以display做不了过渡效果，但是可以有其他的办法做过渡效果 解决办法: 1，依然用display，但是在js中加setTimeout延迟一下 2，用opac...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值