How to get #keyframes opacity to change opacity every time on FireFox? - css

Question

My goal is to create a dropdown that fades in every time its parent element is moused over.
And, I want to use the CSS #keyframe property to control the opacity.
See the below example. It works in IE and Chrome as expected (fade-in happens on every mouse over). But, in FireFox, the fade-in happens only on the first mouse over. How can I get the fade-in to happen every time in FireFox?
CodePen showing example:
http://codepen.io/anon/pen/IEBgb
(notice the green "Baz" text fades in)
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

It can be done, but you will have to adjust a few things:
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;
}
Or if you're looking to fade in and fade out you could try something like this:
Working Example 2
Note that the second method uses pointer-events:none/auto so it may have compatibility issues in older browsers. Also seeing the fadeOut animation when the page first loads may be a problem.