【前端_关键帧】

正在搬砖嘤

已于 2022-08-14 20:10:22 修改

阅读量111

点赞数 1

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

于 2022-08-14 20:08:28 首次发布

本文链接：https://blog.youkuaiyun.com/walkinging1/article/details/126335553

版权

web前端专栏收录该内容

11 篇文章

订阅专栏

尚硅谷_关键帧

animation-name 指定动画的关键帧名称

animation-duration：指定动画效果的持续时间

animation-delay：动画效果的延迟，等待一段时间后在执行动画

animation-timing-function：动画的时序函数

animation-iteration-count 动画执行的次数

infinite 无限执行

animation-direction 指定动画运行的方向

normal 从from向to运行，每次都是这样，默认值
reverse 从to向from运行，每次都是这样
alternate 从from向to运行，重复执行动画时反向执行
alternate-reverse 从to向from运行，重复执行动画时反向执行

animation-play-state 设置动画的执行状态

running 动画执行，默认值
paused 动画暂停

animation-fill-mode 动画的填充模式

none 动画执行完毕，元素回到原来位置，默认值
forwards 动画执行完毕，元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards和backwards

奔跑的少年

<!doctype html>
<html lang='en'>
<head>
    <title>Document</title>
    <style>
        .box1 {
            height: 256px;
            width: calc(1536px/6);
            background-image: url("/assets/奔跑的少年/bg2.png");
            margin: 100px auto;
            animation: run 1s steps(6) infinite;
        }

            /* 关键帧 */
        @keyframes run {
            from {
                background-position: 0 0;
            }

            to {
                background-position: -1536px 0;
            }
        }
    </style>
</head>
<body>
    <!-- 表格  -->
    <div class = "box1"></div>
</body>
</html>