Question

我希望有一个仅限css的动画渐渐淡出，直到显示为满时悬停。我可以单独做两件事而不是一起做。悬停元素永远不会起作用。尝试了几种组合，但这里有两个独立的部分：

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 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>

css flicker悬停动画

1 个答案: