js操作css3动画 @keyframes

紫微前端

于 2021-06-07 08:57:53 发布

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：常用代码片段

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/117549287

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文探讨如何利用JavaScript动态控制CSS3的@keyframes动画，包括启动、停止、改变动画速度以及修改动画关键帧等技巧，帮助开发者实现更灵活的网页动效。

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

 var left = 500;
        var styleStr = `
                .progress {
                    -webkit-animation-name: progress;
                    animation-name: progress;
                    width:200px;
                    height:200px;
                    background:green;
                    z-index:9999;
                    position:absolute

                }
                
                @keyframes progress {
                    0% {
                        left:${left}px;
                        top:10px;
                    }
                    10%,
                    20% {
                        left:100px;
                        top:10px;
                    }
                    30%,
                    50%,
                    70%,

了解本专栏