带有悬停的css闪烁动画答案

【问题标题】：css flicker Animation with hover带有悬停的css闪烁动画
【发布时间】：2018-07-30 03:08:50
【问题描述】：

我想要一个只有 CSS 的动画，它会在显示满时淡入淡出直到悬停。我可以分开做这两件事，但不能一起做。悬停元素永远不会起作用。尝试了几种组合，但这是两个单独的部分：

@keyframes flickerAnimation {
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 2s infinite;
   -moz-animation: flickerAnimation 2s infinite;
   -o-animation: flickerAnimation 2s infinite;
    animation: flickerAnimation 2s infinite;
}

/* CSS for hover */
.animate {
    opacity: 0.1;
    transition: opacity 0.2s ease-in-out;
}

.animate:hover {
  opacity: 1.0;
  transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out;
}

#box {
  width: 100px;
  height: 100px;
  background-color: #000;
}

&lt;div id="box" class="animate-flicker animate"&gt;

【问题讨论】：

这行不通……动画会覆盖正在动画的属性的值……所以没有其他东西可以改变这个属性

标签： css animation hover css-animations

【解决方案1】：

正如我上面评论的那样，你不能做这样的事情。正如您在spec 中看到的那样：

如[CSS3CASCADE] 中所定义，动画覆盖所有常规规则

所以一个想法是取消悬停动画：

@keyframes flickerAnimation {
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}

.animate-flicker {
    animation: flickerAnimation 2s infinite;
}

/* CSS for hover */
.animate {
    height:100px;
    background:red;
    opacity: 0.1;
    transition: opacity 0.2s ease-in-out;
}

.animate:hover {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
  animation:unset;
}

<div class="animate animate-flicker">

</div>

【讨论】：

谢谢@Temani Afif 我没有能力给你加分。