Is there a way to create a CSS-only animation that fades in and out until hovered when displayed in full? I can achieve both effects separately, but I'm struggling to make them work together. The hover element doesn't seem to be functioning properly. Despite trying various combinations, I've managed to get the two separate parts working:
@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">