CSS transition 过渡

CSS transition 过渡
1 前言

CSS过渡(transition)可以在一个元素切换到另一种状态时为其定义平滑的过渡效果。

例如，用户鼠标悬停在按钮上时，按钮颜色平滑的从一个颜色过渡到另一个颜色。
```
.btn:hover{
    background-color: red;
    color: black;
}
1
2
3
4
```
默认悬停效果

添加过渡效果
```
.btn{
    transition-duration: 0.8s;
    transition-timing-function: ease;
}
1
2
3
4
```
transition是transition-property、transition-duration、transition-timing-function、transition-delay的简写属性。

下面来一一介绍这些属性。

2 transition-property

这个属性指定应用过渡效果的属性名。

它有以下取值：
- all：默认值，表示过渡效果应用到所有可过渡的属性上。
- none：没有过渡动画。
- ：指定应用过渡效果的属性名，你可以指定多个值，使用逗号分隔。
- initial：重置为初始值。
- unet：重置为默认值。
3 transition-duration

过渡周期，过渡效果的持续时间。

默认值为0s，即没有过渡效果。

属性值以秒或毫秒为单位，像transition-property一样，你也可以设置多个值，它们会自动对应transition-property指定的属性名。

如果时间周期数小于过渡属性数，那么周期数会重复应用；如果时间周期数大于过渡属性数，那么时间周期数多余的部分被忽略。

4 transition-timing-function

过渡效果的时间函数，决定了动画变化速度。

下面是它的属性值介绍。

1）ease

默认值。

过渡在开始时速度较慢，中间时加速，结束时减速。

2）ease-in

过渡开始时速度较慢，然后逐渐加速。

3）ease-out

开始时速度较快，然后逐渐减速。

4）ease-in-out

过渡开始和结束时速度较慢，中间时速度较快。相比于ease更加平滑。

5）linear

过渡速度恒定，没有加速或减速，呈线性变化。

6）step-start

在过渡的开始时立即跳到结束状态。

7）step-end

在过渡的结束时立即跳回开始状态。

8）steps函数

例如steps(4,jump-end)表示将过渡划分为4步，每一步结束时立即跳到结束状态。

第二个参数有以下值：
- jump-start：在每一步开始时立即跳到结束状态。
- jump-end：在每一步结束时立即跳到结束状态。
- jump-none：没有跳跃，过渡效果平滑进行。
- jump-both：在每一步的开始和结束时都立即跳到结束状态。
9）cubic-bezier函数

接受四个参数，分别定义了时间曲线上的两个控制点。

这四个参数的取值范围是从0到1之间。

这四个参数的组合决定了贝塞尔曲线的形状，从而影响了过渡效果的速度和变化。

你可以使用在线的贝塞尔曲线生成器来可视化和调整这些参数。

5 transition-delay

过渡之前需要等待的时间。

6 移动小球Demo
```
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动小球Demotitle>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .ball{
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background-color: red;
            transition:all  7s ease;
        }
        .move {
            transform: translateX(300px); /* 将小球向右移动 */
        }
    style>
head>

<body>
    <button id="animateButton">移动button>
    <div class="ball">div>
    
    <script>
        const animateButton = document.getElementById("animateButton");
        const ball = document.querySelector(".ball");

        animateButton.addEventListener("click", () => {
            ball.classList.toggle("move");
        });
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
```
相关阅读:
redis应用于微服务缓存的探讨
 【python基础】if语句-语法格式
 BUG：ImportError: attempted relative import with no known parent package的解决办法
 动态添加二级表头 You may have an infinite update loop in a component rende 9 function.
配置静态ip，主机名，centos安装jdk，hadoop等
 【Python零基础入门篇 · 9】：字典的相关操作
 Unity UI 完全解决方案
 Java运算符
 NewStarCTF 2023 web
二十一、数组（1）
原文地址：https://blog.csdn.net/2201_75288929/article/details/132630856

1 前言

2 transition-property

3 transition-duration

4 transition-timing-function

5 transition-delay

6 移动小球Demo