• CSS动画-Animation

    一、动画介绍

    动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。
    相比较过渡，动画可以实现更多变化，更多控制的效果。

    二、动画组成

    制作动画分为两个部分：

    1. @keyframes定义动画
    2. animation属性调用动画

    三、@keyframes(关键帧) 定义动画

    创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 from 和 to，等价于 0% 和 100%。

    示例

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

    • 1
    • 2
    • 3
    • 4
    • 5
    body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #2E3E54;
    display: grid;
}

main {
    width: 400px;
    height: 400px;
    background-color: rgb(51, 139, 109);
    padding: 20px;
    justify-self: center;
    align-self: center;
}

div {
    width: 50px;
    height: 50px;
    background-color: coral;
    border-radius: 50%;
    animation-name: move;
    animation-duration: 4s;
}

/* move为动画名 自定义 */
@keyframes move {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(350px, 0);
    }

    50% {
        transform: translate(350px, 350px);
    }

    75% {
        transform: translate(0, 350px);
    }

    100% {
        transform: translate(0, 0);
    }
}

    • 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
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    在这里插入图片描述

    四、动画属性 ★★★

    属性作用
    animation除了animation-play-state之外的所有属性简写
    animation-name需要使用的动画名（必须）
    animation-duration规定动画完成一个周期所花费的时间 (必须)
    animation-timing-function规定动画的速率曲线，默认是 ease
    aniamtion-delay规定动画延迟执行的时间，默认 0
    animation-iteration-count规定动画执行的次数，默认是1
    animation-direction规定动画是否在下一周期逆向播放，默认是 normal
    animation-play-state规定动画运行/暂停 默认是 running
    animation-fill-mode规定动画结束后状态，默认回到初始状态

    1. animation-name

    animation-name:就是需要绑定的@keyframes的名称

    div {
  width: 50px;
  height: 50px;
  animation-name: move;
}

@keyframes move {
  to {
    transform: translateX(400px);
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    这就是定义了一个名称为move的动画，被div元素调用

    2. animation-duration

    animation-duration: 规定动画完成一个周期所花费的时间

    div {
  width: 50px;
  height: 50px;
  animation-name: move;
  animation-duration: 2s;
}

@keyframes move {
  to {
    transform: translateX(400px);
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    意思是指定div元素2s的时间向右移动400px

    3. animation-timing-function

    animation-timing-function: 规定动画的速率曲线，也就是动画执行过程的速度变化，默认是 ease

    属性
    属性说明
    ease默认。动画以低速开始，然后加快，在结束前变慢
    ease-in动画以低速开始
    ease-out动画以低速结束
    ease-in-out动画以低速开始和结束
    cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值 值是从 0 到 1 的数值
    step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画
    step-end在变化过程中，都是以上一帧的显示效果来填充间隔动画
    steps()可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，也就是指定每个阶段分为几步来展示动画 ，然后根据第二个参数来决定显示效果。第二个参数设置后 其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。
    linear动画从头到尾的速度是相同的
    示例
    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>动画速率title>
    <style>
        body {
            margin: 0;
            padding: 0 10px;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #2E3E54;
            display: grid;
            grid-template: 1fr / 1fr;
        }

        .box {
            display: grid;
            grid-template: 1fr / repeat(6, 1fr);
            column-gap: 10px;
        }

        .box>div {
            background-color: chocolate;
            animation-name: move;
            animation-duration: 4s;
        }

        .box div:nth-child(1) {
            animation-timing-function: ease;
        }

        .box div:nth-child(2) {
            animation-timing-function: ease-in;
        }

        .box div:nth-child(3) {
            animation-timing-function: ease-out;
        }

        .box div:nth-child(4) {
            animation-timing-function: ease-in-out;
        }

        .box div:nth-child(5) {
            animation-timing-function: linear;
        }

        .box div:nth-child(6) {
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        @keyframes move {
            to {
                transform: translateY(calc(100vh - 100px));
            }
        }
    style>
head>

<body>
    <div class="box">
        <div>ease(默认)div>
        <div>ease-indiv>
        <div>ease-outdiv>
        <div>ease-in-outdiv>
        <div>lineardiv>
        <div>bezier(自定义)div>
    div>
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
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    在这里插入图片描述

    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>动画速率title>
    <style>
        body {
            margin: 0;
            padding: 0 10px;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #2E3E54;
            display: grid;
            grid-template: 1fr / 1fr;
        }

        .box {
            display: grid;
            grid-template: 1fr / repeat(3, 1fr);
            column-gap: 10px;
        }

        .box>div {
            background-color: chocolate;
            animation-name: move;
            animation-duration: 4s;
        }

        .box div:nth-child(1) {
            animation-timing-function: step-start;
        }

        .box div:nth-child(2) {
            animation-timing-function: step-end;
        }

        .box div:nth-child(3) {
            animation-timing-function: steps(2, start);
        }

        @keyframes move {
            25% {
                transform: translateY(20vh);
            }

            50% {
                transform: translateY(40vh);
            }

            75% {
                transform: translateY(70vh);
            }

            to {
                transform: translateY(90vh);
            }
        }
    style>
head>

<body>
    <div class="box">
        <div>step-startdiv>
        <div>step-enddiv>
        <div>steps(2, start)div>
    div>
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
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    在这里插入图片描述

    4. aniamtion-delay

    aniamtion-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>delaytitle>
    <style>
        body {
            margin: 0;
            padding: 10px;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #2E3E54;
            display: grid;
            grid-template: 1fr / 1fr;
        }

        div {
            width: 50px;
            height: 50px;
            background-color: aliceblue;
            border-radius: 50%;
            animation-name: move;
            animation-duration: 1s;
            animation-delay: 2s;
        }

        @keyframes move {
            to {
                transform: translateX(300px);
            }
        }
    style>
head>

<body>
    <div>div>
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
    • 42
    • 43

    以上代码给div定义一个往右移动300px的动画，因为设置了animation-delay: 2s; 所以会延迟两秒再执行动画

    5. animation-iteration-count

    animation-iteration-count: 规定动画执行的次数，默认是 1

    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>animation-iteration-counttitle>
    <style>
        body {
            margin: 0;
            padding: 10px;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #2E3E54;
            display: grid;
            grid-template: 1fr / 1fr;
        }

        .box {
            width: 400px;
            height: 400px;
            background-color: cornflowerblue;
            align-self: center;
            justify-self: center;
            display: grid;
            grid-template: repeat(3, 1fr) / 1fr;
            row-gap: 10px;
        }

        .box>div {
            width: 50px;
            background-color: rgb(220, 229, 94);
            text-align: center;
            line-height: calc(400px / 3 - 20px);
            animation: wq;
            animation-duration: 1s;
        }

        .box>div:nth-child(1) {
            animation-iteration-count: 1;
        }

        .box>div:nth-child(2) {
            animation-iteration-count: 3;
        }

        .box>div:nth-child(3) {
            animation-iteration-count: infinite;
        }

        @keyframes wq {
            to {
                width: 400px;
            }
        }
    style>
head>

<body>
    <div class="box">
        <div>1div>
        <div>3div>
        <div>infinitediv>
    div>
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
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    在这里插入图片描述

    6. animation-direction

    animation-direction: 规定动画是否在下一周期逆向播放，默认是 normal

    属性
    1. normal 正序播放（播放结束立刻回到元素初始状态）
    2. reverse 倒序播放
    3. alternate 交替播放 (动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放)
    4. alternate-reverse 反交替播放
    5. inherit 从父元素继承该属性

    如果动画只执行一次，那么animation-direction将无效

    示例
    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>animation-diractiontitle>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .box {
            width: 100vw;
            height: 100vh;
            background-color: #2E3E54;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul {
            list-style: none;
            width: 600px;
            height: 200px;
            display: flex;
        }

        li{
            flex: 1;
            color: #f3462c;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        li:nth-child(1) i {
            animation-direction: normal;
        }

        li:nth-child(2) i {
            animation-direction: reverse;
        }

        li:nth-child(3) i {
            animation-direction: alternate;
        }

        li:nth-child(4) i {
            animation-direction: alternate-reverse;
        }

        li .fa {
            animation-name: big;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            font-size: 2em;
        }

        li span {
            position: absolute;
            bottom: 0;
        }

        @keyframes big {
            to {
                transform: scale(3);
            }
        }
    style>
head>
<body>
    <div class="box">
        <ul>
            <li>
                <i class="fa fa-heart">i>
                <span>normalspan>
            li>
            <li>
                <i class="fa fa-heart">i>
                <span>reversespan>
            li>
            <li>
                <i class="fa fa-heart">i>
                <span>alternatespan>
            li>
            <li>
                <i class="fa fa-heart">i>
                <span>alternate-reversespan>
            li>
        ul>
    div>
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
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

    在这里插入图片描述

    7. animation-play-state

    animation-play-state: 规定动画运行/暂停 默认是 running

    属性

    running 运行
    paused 暂停

    示例
    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>animation-iteration-counttitle>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #2E3E54;
            display: grid;
            grid-template: 1fr / 1fr;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: darkturquoise;
            justify-self: center;
            align-self: center;
            animation-name: rotate;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        div:hover {
            animation-play-state: paused;
        }

        @keyframes rotate {
            to {
                transform: rotate(360deg);
            }
        }
    style>
head>

<body>
    <div>div>
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
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    在这里插入图片描述

    8. animation-fill-mode

    animation-fill-mode: 规定动画结束后展示的状态，默认回到初始状态

    属性
    属性说明
    none动画执行前后不改变任何样式
    backwards保持目标动画第一帧的样式
    forwards保持目标动画最后一帧的样式
    both动画将遵循开始和结束后的帧动画进行停留，也就是说会从第一帧开始停留显示，动画执行之后会停留到动画结束时的状态；与上面两个值的差别是，如果元素使用 forwards、backwards 两个值会在没有添加动画之前的展示状态进行停留，执行动画的时候才会开始执行关键帧，有这么一些细小的差别。
    示例
    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>animation-iteration-counttitle>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #2E3E54;
            display: grid;
            grid-template: 1fr / repeat(4, 1fr);
        }

        div {
            width: 100px;
            height: 50px;
            background-color: aquamarine;
            justify-self: center;
            align-self: flex-end;
            animation-name: wq;
            animation-duration: 2s;
            animation-delay: 2s;
        }

        div:nth-child(1) {
            animation-fill-mode: none;
        }

        div:nth-child(2) {
            animation-fill-mode: backwards;
        }

        div:nth-child(3) {
            animation-fill-mode: forwards;
        }

        div:nth-child(4) {
            animation-fill-mode: both;
        }
        
        @keyframes wq {
            0% {
                height: 100px;
            }

            50% {
                height: 60vh;
            }

            100% {
                height: 100vh;
            }
        }
    style>
head>

<body>
    <div>nonediv>
    <div>backwardsdiv>
    <div>forwardsdiv>
    <div>bothdiv>
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
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71

    在这里插入图片描述

    9. animation 简写

    • 简写属性里面不包含 animation- play-state
    animation: name duration timing-function delay iteration-count direction fill-mode;

/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 2s; */
/* 速度曲线 */
/* animation-timing-function: ease-in; */
/* 何时开始 */
/* animation-delay: 1s; */
/* 重复次数 */
/* animation-iteration-count: 2; */
/* 是否逆向播放 */
/* animation-direction: alternate; */
/* 结束后状态 */
/* animation-fill-mode: forwards; */

animation: move 2s linear 0s infinite alternate forwards;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 注意：先使用的时间一定是动画持续时间animation-duration
  • 相关阅读:
    网格布局grid
    如何从base64中获取图像的宽度、高度、Uint8ClampedArray
    Android通知Notification使用全解析，看这篇就够了
    Java要抛弃祖宗的基业，Java程序员危险了！
    全球首例：肾衰7年的他移植了一颗猪肾脏
    有意思的方向裁切 overflow: clip
    【NODE.JS】Buffer
    云服务的计算服务中的弹性云服务器(ECS)、裸金属服务器(BMS)以及镜像服务(IMS)的概念和深入理解【CloudService】
    【Redhat】新系统yum源配置
    ant-design-vue 修改a-button disabled默认样式
  • 原文地址：https://blog.csdn.net/qq_48960335/article/details/127347995