Grow your CSS skills. Land your dream job.

CSS Opacity Animation plus Transition – Tracking the Opacity Value

  • # April 5, 2013 at 9:44 pm

    I’m attempting to implement a very simple :hover fade effect using only CSS 3.

    [Pen Here](http://codepen.io/Johnny_Sandwiches_Bro/pen/tEHwx)

    The title text on the page is faded in with an opacity animation to 0.35 (REST STATE). I’d like to have a :hover effect that fades that 0.35 back to 0(ACTIVE STATE), and then animates in reverse back to 0.35 (REST STATE.)


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

    This code gives me the effect on :hover, however, the return to REST STATE is a quick, jarring bounce. Can anyone explain how the opacity is changing? Or how I can put a reciprocal fadeOut functionality once :hover ends? I had seen [this snippet]( http://jsbin.com/aduwif/11/edit ) and thought that the reciprocal was a default condition of a normal transition. Some help from the Enlightened CSS Masters…?

    Thanks

    # April 7, 2013 at 8:09 pm

    Ah, solved it.

    I wasn’t declaring the transition’s properties when I defined the container1 class. Nor did I define the original opacity – just in the definition of the animation. I’m not well-versed enough to provide a better explanation as to the underlying reasons. It seems that the hover statement provides the transition and the transition statement in the class definition provides the reciprocal.

    Not sure if that’s CSS canon – problem solved as Pen now demonstrates.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".