CSS Transition - get return animation, different from start css property

Question

<!doctype html>
<html>
<head>
<style type="text/css">

#i {
height: 20px;
background-color: #999;
/*return animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}

#i:hover {
height: 300px;
background-color: #F00;

/*begin animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}

</style>
</head>

<body>
<div class="c" id="i" >Hover Me</div>
</body>
</html>

See above. How do I get the box 'hover me' to end its bck-color to red, on the /return animation/, using only CSS. It understandably returns to #999, but I dont want that.

Basically: Start box 20px, #999 >> expand 300px >> Contract 20px, #red

Also is there a way to pass a value to a css property when using transitions like this:

-webkit-transition: background-color:red 0.4s ease-in 0.3s

Thanks for your help. Just trying to understand the very basics.

Possible duplicate of [Make CSS Hover state remain after "unhovering"](http://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering) — Jesse, Oct 02 '15 at 17:19

score 1 · Answer 1 · answered Oct 02 '15 at 17:45

You can do something very close (but maybe not enough) using CSS animations.

Set an animation (not transition) on the element, and pause it. Set it's fill mode to forwards. On hover set the animation to running. When the animation ends, the end state remains.

The caveat - if somebody stops hovering before the animation is done, it will remain in it's current position until hovered again.

#i {
  height: 20px;
  background-color: #999;
  animation: animation 0.4s ease-in 0.3s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
#i:hover {
  animation-play-state: running;
}
@keyframes animation {
  0 {
    height: 20px;
    background-color: #999;
  }
  50% {
    height: 300px;
  }
  100% {
    height: 20px;
    background-color: red;
  }
}

<div class="c" id="i">Hover Me</div>

Dori ...Dang it caveat. Pretty close. Im guessing you cant pause it on 50% on hover? ...or is there a way? Let me know. — fhonics, Oct 02 '15 at 19:05

score 0 · Answer 2 · answered Oct 02 '15 at 17:22

0

I think we don't have anything like this right now, you probably use JavaScript to do this kind of things.

answered Oct 02 '15 at 17:22

Poojan Bedi

21
5

score 0 · Answer 3 · answered Oct 02 '15 at 21:07

I had to use a combination of jquery add and remove classes. wishing it could have been pure css though.sigh

Hopefully this simple code helps someone. If anyone has something better esp with pure css... id be happy to learn. @obi Cheers and thanks to all.

    <body>
    <div class="c" id="i" >Hover Me</div>
    <style>

    .c {height: 20px; background-color: #999;}

    /*----begin animation-----------------------------------*/
    #i:hover {
        height: 300px;
        background-color: #0F0;
        -webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;

    }

    /*----return animation-----------------------------------*/
    .c_returnAnime {
        height: 100px;
        background-color: #F00; 
        -webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;

    }
    </style>
    <script>
    $('#i').hover(
            //always add class before removing other or errors
            function(){ $(this).addClass('c_returnAnime') }, 
            function(){ $(this).removeClass('c') }
    )
    </script>
    </body>
    </html>

CSS Transition - get return animation, different from start css property

3 Answers3