动画的属性

最新推荐文章于 2024-07-26 11:41:15 发布

w_meng_zhao

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量133

点赞数

分类专栏： html 文章标签：动画 javascript 开发语言

本文链接：https://blog.csdn.net/w_meng_zhao/article/details/127180506

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 animation:属性名 动画执行时间  动画速度(匀速)  动画的延迟时间 动画的循环次数  动画的方向  动画结束状态*/
            /* infinite无限循环   alternate来回执行*/
            /* animation: move 1s linear 2s infinite alternate; */


            /* 动画结束状态不能和动画的循环次数以及动画的方向同时使用 */
            /*  forwards停留在最后一帧 */
            animation: move 2s linear forwards;
        }

        /* 1.定义动画 */
        @keyframes move {

            /* 开始状态 */
            from {
                transform: translate(0, 0);
            }

            /* 结束状态 */
            to {
                transform: translate(800px, 0);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>