CSS animation属性

原创已于 2022-08-17 18:25:30 修改 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #css3

于 2022-06-02 00:38:05 首次发布

笔记专栏收录该内容

31 篇文章

订阅专栏

本文通过一个简单的HTML和CSS3代码示例，展示了如何使用CSS3动画让一个红色方块在网页中从左至右无限循环平滑移动。关键代码在于`animation`属性的设置，包括动画名称、时长、速度曲线和无限循环等参数。

先看简单的效果图
请添加图片描述

这是源代码

<!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 {
            position: absolute;
            border: 1px blue solid;
            padding: 50px 200px;
        }

        #my-box {
            position: absolute;
            background: red;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            animation: moveBox 2s linear infinite;
        }

        @keyframes moveBox {
            from {
                left: 0px
            }

            to {
                left: 300px;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="my-box">
            我向右移动了
        </div>
    </div>
</body>
</html>

关键代码 animation: moveBox 2s linear infinite;
animation:
name(名称)
duration(需要多少秒完成)
timing-function(如何完成一个周期)
delay(启动前的延迟间隔)
iteration-count(播放次数)
direction(是否轮流反向播放动画)
fill-mode(当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。)
play-state(动画是否正在运行或已暂停)