CSS过渡

最新推荐文章于 2024-03-18 21:52:36 发布

CSPsy

最新推荐文章于 2024-03-18 21:52:36 发布

阅读量693

点赞数 6

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/m0_51573433/article/details/121197681

版权

CSS 专栏收录该内容

11 篇文章 8 订阅

订阅专栏

CSS过渡

1. 什么是过渡

在 CSS 中，过渡属性：transition
过渡可以为一个元素在不同样式之间变化自动添加 ”补间动画“

相比于用 JavaScript 实现过渡，用 CSS 优点：
动画更细腻，内存开销小

下面为 transtion 四要素：

transition: name | duration | timing function | delay;

name: 要过渡属性的名字
(初始默认值 all)
duration: 动画时长
(初始默认值 0s)
timing function：变化速度曲线
(初始默认值 ease)
delay: 延迟时间（动画经过多少时间才开始）
(初始默认值 0s)

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 过渡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            transition: width 3s linear 0s;
        }

        .box:hover {
            width: 800px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2. 可以参与过渡的属性有哪些

所有数值类型的属性（例如：width, height）
背景颜色
文字颜色
所有变形（2D 和 3D）

3. 缓动效果

过渡的缓动效果就是变化速度曲线，之前四要素中的第三个参数

常用缓动参数：
在这里插入图片描述

可以用贝塞尔曲线自定义动画的缓动参数：
进入贝塞尔曲线这个网站，看效果进行自定义。

举个例子：

transition: width 3s cubic-bezier(.32,.84,.83,.67) 0s;

CSPsy

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS过渡

CSS过渡1. 什么是过渡2. 可以参与过渡的属性有哪些3. 缓动效果1. 什么是过渡在 CSS 中，过渡属性：transition过渡可以为一个元素在不同样式之间变化自动添加 ”补间动画“相比于用 JavaScript 实现过渡，用 CSS 优点：动画更细腻，内存开销小下面为 transtion 四要素：transition: name | duration | timing function | delay;name: 要过渡属性的名字duration: 动画时长timi
复制链接

扫一扫