CSS：动画

最新推荐文章于 2022-09-01 21:17:02 发布

李建雨

最新推荐文章于 2022-09-01 21:17:02 发布

阅读量517

点赞数

本文链接：https://blog.csdn.net/m0_55944058/article/details/121321959

版权

1、基本使用

使用动画分两步：

第一步：在style标签内定义动画

        @keyframes 动画名（英文） {
            form {

            }

            to {

            }
        }

        @keyframes 动画名（英文） {
            0% {填写变量}   

            25% {填写变量}

            100% {填写变量}
            }

第二步：在需要添加动画的盒子上调用动画

调用的属性名为animation：属性值；

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        div {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 调用名叫go的动画，动画时长设置为2s，循环播放（infinite） */
            animation: go 2s infinite;
        }



        /* 定义一个动画 并定义5个关键帧 */
        @keyframes go {
            0% {
                transform: translateX(0)
            }

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

            50% {
                transform: translate(400px,400px)
            }

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

            100% {
                transform: translate(0)
            }
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

2、animation的属性

动画相关属性	属性值
animation-name: go;	动画调用名字
animation-duration: 2s;	动画调用时长 2s
animation-delay: 1s;	动画调用延迟播放延迟1s播放
animation-fill-mode:forwards;	forwards 停在结束帧 backwards 停在开始帧(默认值)
animation-iteration-count: infinite;	动画调用播放次数默认1次,infinite无限重复
animation-timing-function: ease;	动画调用,时间曲线,ease二次曲线,linear线性曲线
animation-direction:alternate;	动画播放方向:alternate正反向轮流播放 reverse反向播放
animation-play-state:paused;	暂停播放一般伴随：hover使用

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        div {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 动画调用名字 */
            animation-name: go;
            /* 动画调用时长 */
            animation-duration: 2s;
            /* 动画调用延迟播放 */
            animation-delay: 1s;
            /* 动画调用停在哪一帧 */
            /* forwards  停在结束帧 */
            /* backwards  停在开始帧(默认值) */
            animation-fill-mode:forwards;
            /* 动画调用播放次数默认1次,infinite无限重复 */
            animation-iteration-count: infinite;
            /* 动画调用,时间曲线,ease二次曲线,linear线性曲线 */
            animation-timing-function: ease;
            /* 动画播放方向:alternate正反向轮流播放 reverse反向播放*/
            animation-direction:alternate;

        }

        div:hover {
            /* 暂停播放 一般伴随：hover使用*/
            animation-play-state:paused;
        }


        @keyframes go {
            0% {
                transform: translateX(0)
            }

            50% {
                transform: translate(400px, 0)
            }

            100% {
                transform: translate(400px, 400px)
            }

        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

3、animation属性的连写

写法：

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态；

注意事项：

1、取值顺序不分先后。

2、动画名称和动画时长必须书写。

3、当出现两个时间，第一个为动画时长，第二个为延时时间。

4、逐帧动画

通过逐帧动画可以配合精灵图制作精灵图动画，核心原理是控制动画播放曲线为step（N），N与精灵图小图个数保持一致，定义动画变量每帧定在精灵图不同小图上，这样在播放动画的时候，就会看到精灵图“动”起来了。

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        .box {
            width:140px ;
            height: 140px;
            border: 1px solid #000;
            /* 精灵图动画第一步导入精灵图 */
            background:url(./images/bg.png) 0 0;
            /* 精灵图动画第三步  调用精灵图 */
            animation: run 1s steps(12) infinite, move 3s linear ;
        }

        .box:hover {
            /* 当鼠标悬停在动画上时动画暂停 */
            animation-play-state:paused ;
        }

        /* 精灵图动画第二步  定义动画 */
        @keyframes run {
            0% {
                background-position:0 0 ;
            }

            100% {
                /* 最后一帧背景位置为精灵图宽度 */
                background-position:-1680px 0 ;
            }
        }

        @keyframes move {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translate(800px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

李建雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS：动画

1、基本使用使用动画分两步：第一步：在style标签内定义动画 @keyframes 动画名（英文） { form { } to { } } @keyframes 动画名（英文） { 0% {填写变量} 25% {填写变量} 100% {填写变量}
复制链接

扫一扫