# Tracking Opacity Values - an Animation and a Transition

**URL:** <https://forum.kirupa.com/t/tracking-opacity-values-an-animation-and-a-transition/330936>\
**Category:** web dev\
**Created:** [April 11, 2013, 10:25pm UTC](https://forum.kirupa.com/t/tracking-opacity-values-an-animation-and-a-transition/330936 "2013-04-11T22:25:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mayakovsky](https://avatars.discourse-cdn.com/v4/letter/m/ecae2f/32.png) [@Mayakovsky](https://forum.kirupa.com/u/Mayakovsky)\
**Post date:** [April 11, 2013, 10:25pm UTC](https://forum.kirupa.com/t/tracking-opacity-values-an-animation-and-a-transition/330936/1 "2013-04-11T22:25:32Z")

</div>

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.

```auto
.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.

```auto
.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.

```auto
.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:

```auto

.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

```auto
<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](http://codepen.io/Johnny_Sandwiches_Bro/full/LclzB)

[FULL CODE HERE](http://codepen.io/Johnny_Sandwiches_Bro/pen/LclzB)

This code DOES NOT work on the latest Chrome build :bobafett:[LIVE SITE HERE](http://www.hiddenforces.net/bio.html)

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