带有悬停的css闪烁动画

Posted 2023-03-06

【中文标题】带有悬停的css闪烁动画

【英文标题】：css flicker Animation with hover

【发布时间】：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;

<div id="box" class="animate-flicker animate">

【问题讨论】：

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

【参考方案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 我没有能力给你加分。