css3暂停动画

Posted on   猫头唔食鱼  阅读(261)  评论(0)  编辑  收藏  举报

animation-play-state用于设置动画的状态，有两个值，paused和running

 

复制代码
 <style>
        .box{
            width:100px;
            height: 100px;
            background-color:orange;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            color: greenyellow;
            position: absolute;
            top:0;
            left: 0;
            animation: run 2s infinite;
        }

        /* 鼠标经过暂停动画 */
        .box:hover{
            animation-play-state: paused;
        }
        @keyframes run {
            0%{
                left: 0;
            }
            100%{
                left:100px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
复制代码

 

编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示