CSS transition 过渡

1 前言

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

例如,用户鼠标悬停在按钮上时,按钮颜色平滑的从一个颜色过渡到另一个颜色。

.btn:hover{
    background-color: red;
    color: black;
}

默认悬停效果

CSS transition 过渡_第1张图片

添加过渡效果

.btn{
    transition-duration: 0.8s;
    transition-timing-function: ease;
}

CSS transition 过渡_第2张图片

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

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

CSS transition 过渡_第3张图片

下面是它的属性值介绍。

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函数

CSS transition 过渡_第4张图片

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

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

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

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

5 transition-delay

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

6 移动小球Demo

CSS transition 过渡_第5张图片

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>

你可能感兴趣的:(CSS,css,前端)