Javascript 悬停时暂时偏离 CSS 动画，然后恢复

#box {
  width: 100px;
  height: 100px;
  background-color: #ffcccc;
  animation: cycleColor 2s infinite linear;
  transition: background-color .2s;
}

#box:hover {
  animation-play-state: paused;
  background-color: yellow;
}

@keyframes cycleColor {
  0% {
    background-color: #ffcccc;
  }
  50% {
    background-color: #ccccff;
  }
}

<div id='box'></div>

#box {
  width:100px;
  height:100px;
  background-color: #ffcccc;
  animation: cycleColor 2s infinite linear;
  transition: background-color .2s ease;
  position: relative;
}

#box:hover {
  animation-play-state: paused;
}

#box::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  background: yellow;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#box:hover::after {
  opacity: 1;
}

@keyframes cycleColor {
    0% {
        background-color: #ffcccc;
    }    50% {
        background-color: #ccccff;
    }
}

<div id='box'></div>

Javascript相关问答推荐

在贝塞尔曲线的直线上找不到交叉点：(使用@Pomax的bezier.js)

fs. writeFile()vs fs.writeFile()vs fs.appendFile()

被CSS优先级所迷惑

如何将Map字符串，布尔值转换为{key：string；value：bo布尔值；}[]？<>

我们如何从一个行动中分派行动

手机上的渲染错误文本必须在文本组件中渲染，但在浏览器上没有问题<><>

v—自动完成不显示 Select 列表中的所有项目

Prisma具有至少一个值的多对多关系

使用ThreeJ渲染的形状具有抖动/模糊的边缘

当用户点击保存按钮时，如何实现任务的更改？

如何在FastAPI中为通过file：/URL加载的本地HTML文件启用CORS？

如何限制显示在分页中的可见页面的数量

JavaScript：如果字符串不是A或B，则

在Java脚本中录制视频后看不到曲目

在JavaScript中，有没有一种方法可以迭代字符串的词法标记？

脚本语法错误只是一个字符串，而不是一个对象？

输入数据覆盖JSON文件

在HTML中使用meta标记来指定定制元数据以用于使用JavaScript进行检索是不是一个坏主意？

在执行console.log(new X())时记录一个字符串

鼠标进入，每秒将图像大小减小5%