Search code examples
htmlcsstransition

CSS transition out error

and sorry for my horrible english. I have got a problem with CSS and transition.

I need to make a div 100px x 100px, it's just an example of course.

When I put cursor hover it, it should grow and be 500px x 500px.

And here, everything is fine and working. The thing is, when i remove the cursor, I need that the div return back to 100x100px, but it won't have a transition, it just disappear and return 100x100px. How can I fix this?

Here is the code i use.

<html>
<head>
  <style>
    div.resize {
      width: 100px;
      height: 100px;
      background: rgb(80,80,80);
      }
      div.resize:hover {
      width: 500px;
      height: 500px;
      transition-duration: 1s;
      }
  </style>
</head>
  <body>
   <div class="resize"></div>
  </body>
</html>
Solution

  • Currently you are saying that there can only be an animation while hovering. You want the animation to reverse once you have left the element (you no longer hover), but that is not allowed, as the div without hover has no animation set.

    Just put the transition-duration: 1s on the 'div.resize' instead of on the 'div.resize:hover' and it is fixed.