Question

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

请参阅以下示例。它可以按照预期在IE和Chrome中运行（每次鼠标都会出现淡入淡出）。但是，在FireFox中，淡入仅在第一个鼠标悬停时发生。如何在FireFox中每次都能实现淡入效果？

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

（注意绿色＆＃34; Baz＆＃34;文字淡入）

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

Answer 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

请注意，第二种方法使用指针事件：none / auto，因此在旧浏览器中可能存在兼容性问题。在页面首次加载时看到fadeOut动画也可能是个问题。

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

1 个答案: