如何在悬停时停止当前位置的css动画? [英] How to stop css animation in current position on hover?

问题描述

我在里面有一个 div，它可以移动另一个 div.当我将鼠标悬停在 .container 上时，我需要将 .block 停在当前位置.怎么做?

HTML:

<div class="block"></div>

CSS:

.container {宽度:200px；高度:100px；填充:10px；边框:1px 实心 #000；位置:相对；}.堵塞 {宽度:100px；高度:100px；背景:红色；位置:绝对；动画:移动 2s 线性无限；}@关键帧移动{0% { 左:10px;}25% { 左:50px;}50% { 左:100px;}75% { 左:50px;}100% { 左:10px;}}

演示

解决方案

您可以添加

.block:hover{动画播放状态:暂停；}

将鼠标悬停在动画上时暂停动画.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

I have a div inside which moves another div. I need to stop .block at the current position when I hover on .container. How to do it?

HTML:

<div class="container">
    <div class="block"></div>
</div>

CSS:

.container {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    position: relative;
}

.block {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    animation: move 2s linear infinite;
}

@keyframes move {
    0% { left: 10px; }
    25% { left: 50px; }
    50% { left: 100px; }
    75% { left: 50px; }
    100% { left: 10px; }
}

DEMO

解决方案

You can add

.block:hover
{
    animation-play-state: paused;
}

to pause the animation when you hover over it.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

这篇关于如何在悬停时停止当前位置的css动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！