CSS animation属性

Jet_closer

已于 2022-08-17 18:25:30 修改

阅读量141

点赞数

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

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

本文链接：https://blog.csdn.net/jet_lover/article/details/125093113

版权

笔记专栏收录该内容

22 篇文章 2 订阅

订阅专栏

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

这是源代码

<!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(动画是否正在运行或已暂停)

详情可看CSS3 animation（动画）属性

Jet_closer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS animation属性

先看简单的效果图这是源代码关键代码 animation:name(名称)duration(需要多少秒完成)timing-function(如何完成一个周期)delay(启动前的延迟间隔)iteration-count(播放次数)direction(是否轮流反向播放动画)fill-mode(当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。)play-state(动画是否正在运行或已暂停)详情可看CSS3 animation（动画）属性...
复制链接

扫一扫