关于IT基础

↩ zhcn 编程语言 Web相关 JSON 非公開: CSS过渡详解（过渡效果）

CSS过渡详解（过渡效果）

通常，当 CSS 中的属性值发生更改时，浏览器会立即更新相应的样式。例如，当鼠标悬停在元素上时，:hover 选择器定义的样式将立即应用于该元素。 CSS3 中添加了过渡功能。这类似于简单的动画，但允许元素在指定的时间内从一种样式平滑过渡到另一种样式，而无需 Flash 或 JavaScript 的帮助。

CSS 中有五个过渡属性：

  • transition-property：设置参与元素过渡的属性。
  • 过渡持续时间：设置元素过渡的持续时间。
  • transition-timing-function：设置元素过渡的动画类型。
  • 转换延迟：设置转换延迟时间。默认值为 0。
  • transition：简写属性，用于同时设置以上四个过渡属性。

要成功实施转换，您需要定义两件事。

  • 元素参数和过渡效果属性。
  • 过渡效果的持续时间。

提示：过渡效果通常在鼠标悬停在元素上时发生，如果未设置过渡时间，过渡效果将不会生效，因为过渡时间的默认值为 0 。

1. 过渡性质

transition-property 属性用于设置元素内涉及转换的属性名称，语法格式如下：

过渡属性：无 | 所有 | 属性；

参数说明如下：

  • none：表示没有属性参与过渡效果。
  • all：表示所有属性参与过渡效果。
  • property：定义,应用过渡效果的属性名称列表。用逗号分隔多个属性名称。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="kukku"></div>
</body>
</html>
[标题id =“attachment_805”对齐=“aligncenter”宽度=“257”] 高级 CSS 过渡悬停[/标题]

悬停之前

2.过渡持续时间

transition-duration 属性用于设置转换时间（以秒或毫秒为单位）。语法是：

过渡持续时间：时间；

其中，time是过渡效果完成所需的时间（以秒或毫秒为单位），默认值为0，表示没有效果。

如果有多个属性参与transition，可以使用逗号分隔多个属性如transition-duration: 1s, 2s, 3s;来指定这些属性的transition需要的时间，也可以设置。此外，您还可以使用时间来设置迁移所有参与迁移的属性所需的时间。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.转换定时函数

transition-timing-function 属性用于设置过渡动画的类型，该属性的可选值有：

价值解释
linear始终以相同的速度完成整个过渡。这相当于三次贝塞尔曲线(0,0,1,1)。
ease缓慢开始，然后快速，最后缓慢结束，以完成过渡过程。这相当于三次贝塞尔曲线(0.25,0.1,0.25,1)。
ease-in慢慢地开始过渡过程。这相当于三次贝塞尔曲线(0.42,0,1,1)。
ease-out一个缓慢完成转变的过程。相当于三次贝塞尔曲线(0,0,0.58,1)。
ease-in-out以慢速开始并以慢速结束的过渡。相当于三次贝塞尔曲线(0.42,0,0.58,1)。
cubic-bezier(n, n, n, n)使用cube-bezier()函数定义您自己的值。每个参数的取值范围是0到1。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
            transition-timing-function: ease;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.转换延迟

transition-delay 属性用于设置过渡效果何时开始，该属性的语法如下：

转换延迟：时间；

其中，参数time用于设置转场效果开始前的等待时间，单位为秒或毫秒。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
            transition-delay: 3s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
5.过渡

过渡属性是上述四个属性的缩写，可以同时设置所有四个属性。属性的语法形式为：

转换：转换属性转换持续时间转换计时功能转换延迟；

对于transition属性，transition-property和transition-duration是必需参数，transition-timing-function和transition-delay是可选参数，如果不需要，可以省略。你还可以通过transition属性设置多组转场效果，每组之间用逗号分隔。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width：100px;
            height：100px;
            border：3px solid black;
            margin: 10 0 0 10px;
            transition: width .25s liner 1.9s, background 2s 3s, transform 3s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

上面的代码也可以写成：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background, transform;
            transition-duration: .25s, 1s, 2s;
            transition-timing-function: linear, ease, ease;
            transition-delay: 1.9s, 2s, 0s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浅显易懂的《CSS Transitions详解（过渡效果）》讲解！您必须观看的最佳 2 个视频

CSSアニメーション解説！transitionプロパティを現場で使えるようになろう
https://www.youtube.com/watch?v=AcG9T2BRA6E&pp=ygVF6Kmz57SwQ1NT44OI44Op44Oz44K444K344On44Oz77yI44OI44Op44Oz44K444K344On44Oz5Yq55p6c77yJJmhsPUpB
通常，当 CSS 中的属性值发生更改时，浏览器会立即更新相应的样式。例如，当鼠标悬停在元素上时，:hover 选择器定义的样式将立即应用于该元素。 CSS3 中添加了过渡功能。这类似于简单的动画，但允许元素在指定的时间内从一种样式平滑过渡到另一种样式，而无需 Flash 或 JavaScript 的帮助。

CSS 中有五个过渡属性：

  • transition-property：设置参与元素过渡的属性。
  • 过渡持续时间：设置元素过渡的持续时间。
  • transition-timing-function：设置元素过渡的动画类型。
  • 转换延迟：设置转换延迟时间。默认值为 0。
  • transition：简写属性，用于同时设置以上四个过渡属性。

要成功实施转换，您需要定义两件事。

  • 元素参数和过渡效果属性。
  • 过渡效果的持续时间。

提示：过渡效果通常在鼠标悬停在元素上时发生，如果未设置过渡时间，过渡效果将不会生效，因为过渡时间的默认值为 0 。

1. 过渡性质

transition-property 属性用于设置元素内涉及转换的属性名称，语法格式如下：

过渡属性：无 | 所有 | 属性；

参数说明如下：

  • none：表示没有属性参与过渡效果。
  • all：表示所有属性参与过渡效果。
  • property：定义,应用过渡效果的属性名称列表。用逗号分隔多个属性名称。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="kukku"></div>
</body>
</html>
[标题id =“attachment_805”对齐=“aligncenter”宽度=“257”] 高级 CSS 过渡悬停[/标题]

悬停之前

2.过渡持续时间

transition-duration 属性用于设置转换时间（以秒或毫秒为单位）。语法是：

过渡持续时间：时间；

其中，time是过渡效果完成所需的时间（以秒或毫秒为单位），默认值为0，表示没有效果。

如果有多个属性参与transition，可以使用逗号分隔多个属性如transition-duration: 1s, 2s, 3s;来指定这些属性的transition需要的时间，也可以设置。此外，您还可以使用时间来设置迁移所有参与迁移的属性所需的时间。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.转换定时函数

transition-timing-function 属性用于设置过渡动画的类型，该属性的可选值有：

价值解释
linear始终以相同的速度完成整个过渡。这相当于三次贝塞尔曲线(0,0,1,1)。
ease缓慢开始，然后快速，最后缓慢结束，以完成过渡过程。这相当于三次贝塞尔曲线(0.25,0.1,0.25,1)。
ease-in慢慢地开始过渡过程。这相当于三次贝塞尔曲线(0.42,0,1,1)。
ease-out一个缓慢完成转变的过程。相当于三次贝塞尔曲线(0,0,0.58,1)。
ease-in-out以慢速开始并以慢速结束的过渡。相当于三次贝塞尔曲线(0.42,0,0.58,1)。
cubic-bezier(n, n, n, n)使用cube-bezier()函数定义您自己的值。每个参数的取值范围是0到1。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
            transition-timing-function: ease;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.转换延迟

transition-delay 属性用于设置过渡效果何时开始，该属性的语法如下：

转换延迟：时间；

其中，参数time用于设置转场效果开始前的等待时间，单位为秒或毫秒。

示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
            transition-delay: 3s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
5.过渡

过渡属性是上述四个属性的缩写，可以同时设置所有四个属性。属性的语法形式为：

转换：转换属性转换持续时间转换计时功能转换延迟；

对于transition属性，transition-property和transition-duration是必需参数，transition-timing-function和transition-delay是可选参数，如果不需要，可以省略。你还可以通过transition属性设置多组转场效果，每组之间用逗号分隔。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width：100px;
            height：100px;
            border：3px solid black;
            margin: 10 0 0 10px;
            transition: width .25s liner 1.9s, background 2s 3s, transform 3s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

上面的代码也可以写成：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background, transform;
            transition-duration: .25s, 1s, 2s;
            transition-timing-function: linear, ease, ease;
            transition-delay: 1.9s, 2s, 0s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浅显易懂的《CSS Transitions详解（过渡效果）》讲解！您必须观看的最佳 2 个视频

CSSアニメーション解説！transitionプロパティを現場で使えるようになろう
https://www.youtube.com/watch?v=AcG9T2BRA6E&pp=ygVF6Kmz57SwQ1NT44OI44Op44Oz44K444K344On44Oz77yI44OI44Op44Oz44K444K344On44Oz5Yq55p6c77yJJmhsPUpB

最新文章列表

IT基礎ロゴ

这是一个通过简明易懂的方式解说了解IT行业时需要掌握的IT基础知识的网站。

关于IT基础

关于IT基础

使用条款

隐私政策

联系方式

RSS

推荐环境 / 建议环境

科技

新闻

最新技术

人工智能

游戏

Windows

手机

安全

DevOps

网络

数据库

计算机硬件

商业

数字营销

数据可视化

设计

业务运营

客户服务

人力资源管理

协作

销售与市场营销

初创公司

金融科技

平台

Android

IOS

应用程序

Windows

MACOS

网页领域

LINUX

GOOGLE

CHROME BOOK

教育科技

关于IT基础@2024 All rights reseved