Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Opacity Animation plus Transition – Tracking the Opacity Value

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #43914
    Billy_Sandwiches
    Participant

    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

    #130946
    Billy_Sandwiches
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.