Tracking Opacity Values - an Animation and a Transition

programming web dev
1

I’m having a bit of trouble keeping track of the opacity value after an initial Fade Animation (Opacity 0-0.35) followed by a Hover Transition. Focusing on Chrome for clarity.

Let’s say I have a container class and some text that goes in it.

.container1  {
  position: relative;
  height: 10%;
  width: 500px;
  margin: auto;
  padding:80px 10px 0px 10px;
  z-index: 1;

.name3
{font: bold 48px bankgothic_md_btmedium, sans-serif; color: #FEFEFA; 
}

And Classes for the Fade effect plus Keyframes.

.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
.fadeIn-Xs {
    -webkit-animation-duration:1.5s;
    animation-duration:1.5s;
}
.fadeIn-Delay-1s {
    -webkit-animation-delay:1s;
    animation-delay:1s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:0.35; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:0.35; } }

Now say I want to shift the Opacity back to 0 using a hover transition.

.container1:hover {
     opacity:0;  
       transition: opacity 1s ease-out;
       -webkit-transition: opacity 1s ease-out;
     animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

Added this transition code to the container class. (Found it necessary for “mouseout” :hover behavior.) So now class looks like:


.container1  {
    position: relative;
    height: 10%;
    width: 500px;
    margin: auto;
    padding:80px 10px 0px 10px;
    z-index: 1;
    transition: opacity 4s ease-out;
   -webkit-transition: opacity 4s ease-out;

The HTML looks like

<div class="container1">
    <div class="name3 fadeIn fadeIn-Xs fadeIn-Delay-1s"><a href="../index.html" class="fontclear">TITLE GO HERE</a></div>
</div>

This code actually works in my coding environment - Codepen:
DEMO HERE

FULL CODE HERE

This code DOES NOT work on the latest Chrome build :bobafett:LIVE SITE HERE

If anyone can provide any information on tracing the opacity property or any help figuring out this functionality, I sure would appreciate it.