CSS之动画基础—animation属性控制动画过程—走马灯—全民出游季

最新推荐文章于 2024-04-23 22:27:30 发布

VIP文章小琳爱分享

最新推荐文章于 2024-04-23 22:27:30 发布

阅读量805

点赞数

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

本文链接：https://blog.csdn.net/qq_45708377/article/details/125966615

版权

目标：使用animation添加动画效果

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧

一.基础（使用from-to或百分比）

在这里插入图片描述

**代码块**
<!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 2s;
        }

        /* 一. 定义动画：从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>

二.使用animation属性控制动画过程

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复合属性</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* linear是匀速的速度曲线 */
            /* animation: change 1s linear; */
            /* step()分步动画，steps(3) 一个动画分三步执行 */

            /* 3: 重复3次播放 */
            /* animation:名称（change） 时长（1s） 速度曲线（分步—steps（3））  延迟时间（1s） 重复次数（3） */
            /* animation: change 1s steps(3) 1s 3; */

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

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

        @keyframes change {
            from {