CSS3动画

最新推荐文章于 2025-05-28 11:56:13 发布

敏梨

最新推荐文章于 2025-05-28 11:56:13 发布

阅读量94

点赞数

文章标签： css3

本文链接：https://blog.youkuaiyun.com/lzwlm53/article/details/113705307

版权

该博客介绍了如何通过CSS的keyframes定义和调用来精确控制一个或一组动画。示例中展示了如何创建一个盒子从屏幕左侧平滑移动到右侧的动画，并详细解释了动画的各种属性，如动画名称、持续时间、运动曲线、延迟、播放次数和方向等。此外，还提供了动画简写属性的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画：

设置多个节点精确控制一个或一组动画
1.先定义动画
2.再调用动画
用keyframes定义动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画 */
            animation-name: move;
            animation-duration: 2s;
        }
        /* 定义动画 */
        
        @keyframes move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(1000px);
            }
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

动画的一些属性：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0)
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            /* animation-name: move;
            /* 持续时间 */
            /* animation-duration: 2s;
            /* 规定动画的曲线。默认ease */
            /* animation-timing-function: ease; */
            /* 规定何时开始 */
            /* animation-delay: 2s; */
            /* 播放次数默认是1 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 */
            /* animation-direction: alternate; */
            /* 动画简写：动画名称、持续时间、运动曲线、何时开始、播放次数、是否反方向、动画起始或结束状态 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 2s linear 0s 3 alternate forwards;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>