CSS关键帧动画

最新推荐文章于 2024-05-13 14:34:46 发布

evan_v1

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量1.3k

点赞数

文章标签：动画 css css3

本文链接：https://blog.csdn.net/evan_v1/article/details/125191026

版权

案例为一个球在屏幕中不停跳动

首次打开HTML文档，在body部分添加一个div标签，并取上类名为mark，然后给mark添加上宽、高、背景颜色、设置合适的外边距

给mark置动画属性 animation-name设置动画的名字move，animation-duration 设置动画的执行总时间5秒，Anmination-timing-function 设置动画的曲线函数linear匀速，animation-delay设置动画延迟1秒执行(开始运动延时，此处没设，可根据需要进行设定)，animation-iteration-count设置动画执行次数infinite无限次

 <style>
        /* 关键帧动画   一般通过百分比实现
        最初状态
        form{}
        最终状态
        to{}
        */
        @keyframes move{
            0%{
                transform: translate(0px 0px);
            }
            25%{
                /* 基于x,y轴   (-300px) 正值向下移动 负值向上移动*/
                transform: translate(200px,-300px);
            }
            50%{
                transform: translate(400px,300px);
            }
            75%{
                transform: translate(600px,-300px);
            }
            100%{
                transform: translate(800px,300px);
            }
        }
.mark{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            color: black;
            background-color: aqua;
            border-radius: 50%;
            font-size: 20px;

            margin-top: 300px;

            /* 指定要指定的关键帧动画(注意:哪个标签需要动画则添加在哪个标签中) */
            animation-name: move;
            /* 关键帧动画需要的时长 */
            animation-duration: 5s;
            /* 指定关键帧动画执行的次数  infinite 无限次数*/
            animation-iteration-count: infinite;
            /* 动画执行函数  */
            animation-timing-function: linear;
        }
    </style>
<body>
    <div class="mark">球</div>
</body>

效果图展示：

evan_v1

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS关键帧动画

案例为一个球在屏幕中不停跳动首次打开HTML文档，在body部分添加一个div标签，并取上类名为mark，然后给mark添加上宽、高、背景颜色、设置合适的外边距给mark置动画属性 animation-name设置动画的名字move，animation-duration 设置动画的执行总时间5秒，Anmination-timing-function 设置动画的曲线函数linear匀速，animation-delay设置动画延迟1秒执行(开始运动延时，此处没设，可根据需要进行设定)，...
复制链接

扫一扫