如何让@keyframes opacity 每次在 FireFox 上改变不透明度？答案

【问题标题】：How to get @keyframes opacity to change opacity every time on FireFox?如何让@keyframes opacity 每次在 FireFox 上改变不透明度？
【发布时间】：2014-07-08 04:25:41
【问题描述】：

我的目标是创建一个下拉菜单，每次鼠标悬停其父元素时都会淡出。而且，我想使用 CSS @keyframe 属性来控制不透明度。

请参见下面的示例。它可以按预期在 IE 和 Chrome 中运行（每次鼠标经过都会淡入）。但是，在 FireFox 中，淡入仅发生在第一次鼠标悬停时。如何在 FireFox 中每次都进行淡入？

CodePen 显示示例： http://codepen.io/anon/pen/IEBgb

（注意绿色的“Baz”文字淡入）

HTML：

<div class="foo">Foo
  <div class="bar">
    <div class="baz">
      Baz
    </div>
  </div>
</div>

CSS：

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.foo {
  cursor: pointer;
  background: #333;
  color: #ededed;
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
  width: 200px;
  font-size: 30px;
}

.bar {
  width: 200px;
  position: absolute;
  top: 52px;
  background: gray;
  display: none;
  padding: 20px 0;
}

.foo:hover .bar {
  display: block;
}

.baz {
    font-size: 50px;
    color: green;
    visibility: visible;
    opacity: 1;
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    animation: fadeIn 2s;
}

【问题讨论】：

我认为这不是什么严重的问题，只是让FireFox的用户使用经典界面，并为其他用户启用丰富的界面。
我同意这并不严重，但如果能按需要工作就好了。

标签： css css-animations

【解决方案1】：

可以做到，但是你需要做一些调整：

Working Example

@-webkit-keyframes fadeIn {
    0% {
        color: rgba(0, 128, 0, 0); /* transparent text color */
        opacity: 0; 
    }
    50% {
        color: rgba(0, 128, 0, 0); /* transparent text color */
        opacity:1; 
    }
    100% {
        color: rgba(0, 128, 0, 1); /* fade in text color */
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        color: rgba(0, 128, 0, 0);
        opacity: 0;
    }
    50% {
        color: rgba(0, 128, 0, 0);
        opacity:1;
    }
    100% {
        color: rgba(0, 128, 0, 1);
        opacity: 1;
    }
}
.foo {
    cursor: pointer;
    background: #333;
    color: #ededed;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-align: center;
    width: 200px;
    font-size: 30px;
}
.bar {
    display:none;
    width: 200px;
    position: absolute;
    top: 50px;
    background: gray;
    padding: 20px 0;
}
.baz {
    font-size: 50px;
}
.foo:hover .bar {
    display: block;
    -webkit-animation: fadeIn 2s both; /* attach the animation to bar rather than baz */
    animation: fadeIn 2s both;
}

或者，如果您想要淡入和淡出，您可以尝试这样的操作：

Working Example 2

请注意，第二种方法使用 pointer-events:none/auto，因此在旧浏览器中可能存在兼容性问题。在页面首次加载时看到淡出动画也可能是个问题。

【讨论】：