首页 前端知识 CSS动画-Animation

CSS动画-Animation

2024-02-15 14:02:32 前端知识 前端哥 538 26 我要收藏

一、动画介绍

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

二、动画组成

制作动画分为两个部分:

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

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

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

示例

<body>
    <main>
        <div></div>
    </main>
</body>
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);
    }
}

在这里插入图片描述

四、动画属性 ★★★

属性作用
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);
  }
}

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

2. animation-duration

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

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

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

意思是指定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-startstep-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-in</div>
        <div>ease-out</div>
        <div>ease-in-out</div>
        <div>linear</div>
        <div>bezier(自定义)</div>
    </div>
</body>

</html>

在这里插入图片描述

<!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-start</div>
        <div>step-end</div>
        <div>steps(2, start)</div>
    </div>
</body>

</html>

在这里插入图片描述

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>delay</title>
    <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>

以上代码给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-count</title>
    <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>1</div>
        <div>3</div>
        <div>infinite</div>
    </div>
</body>

</html>

在这里插入图片描述

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-diraction</title>
    <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>normal</span>
            </li>
            <li>
                <i class="fa fa-heart"></i>
                <span>reverse</span>
            </li>
            <li>
                <i class="fa fa-heart"></i>
                <span>alternate</span>
            </li>
            <li>
                <i class="fa fa-heart"></i>
                <span>alternate-reverse</span>
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

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-count</title>
    <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>

在这里插入图片描述

8. animation-fill-mode

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

属性
属性说明
none动画执行前后不改变任何样式
backwards保持目标动画第一帧的样式
forwards保持目标动画最后一帧的样式
both动画将遵循开始和结束后的帧动画进行停留,也就是说会从第一帧开始停留显示,动画执行之后会停留到动画结束时的状态;与上面两个值的差别是,如果元素使用 forwardsbackwards 两个值会在没有添加动画之前的展示状态进行停留,执行动画的时候才会开始执行关键帧,有这么一些细小的差别。
示例
<!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-count</title>
    <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>none</div>
    <div>backwards</div>
    <div>forwards</div>
    <div>both</div>
</body>

</html>

在这里插入图片描述

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;
  • 注意:先使用的时间一定是动画持续时间animation-duration
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2059.html
标签
css动画
评论
发布的文章

01-10jQuery框架

2024-03-01 12:03:59

JS jQuery基础2

2024-03-01 12:03:54

jQuery实现文件上传

2024-03-01 12:03:53

JQuery简介与解析

2024-03-01 12:03:31

jquery上传图片单图多图

2024-03-01 12:03:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!