css动画-animation：动画名称动画时长速度曲线延迟时间循环次数动画方向执行完毕时的状态

zzzley

已于 2023-02-16 11:47:38 修改

阅读量563

点赞数

分类专栏：前端文章标签： css 动画 css3

于 2023-02-16 11:21:19 首次发布

本文链接：https://blog.csdn.net/weixin_43286995/article/details/129057304

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

步骤一：定义动画

@keyframes 动画名称{
from{}
to{}
}

百分比定义：百分比指的是动画总时长的占比
@keyframes 动画名称{
0%{}
50%{}
100%{}
}

步骤二：使用动画

animation：动画名称动画时长速度曲线(steps(5) 延迟时间循环次数(infinite 表示无限循环) 动画方向(alternate表示可以反方向执行) 执行完毕时的状态(forwards表示结束时的状态)
在这里插入图片描述

代码一：

<!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>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* 使用动画 */
            animation: change 1s;
        }

        /* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指的是动画总时长的占比 （从一个状态到另一个状态总时长的占比）*/
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></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>animation复合属性</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* animation: change 1s linear; */

            /* 分步动画 */

            /* 3: 重复3次播放 */
            /* animation: change 1s steps(3) 1s 3; */

            /* 无限循环 */
            /* animation: change 1s infinite alternate; */

            /* 默认值, 动画停留在最初的状态 */
            /* animation: change 1s backwards; */

            /* 动画停留在结束状态 */
            animation: change 1s forwards;
        }

        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>