Why is my CSS transition ending abruptly on mouse-out?

Question

I was just testing few CSS transitions( I am beginner in CSS ). All of the transitions are going smooth. But in one of the transition, when mouseover is done transition plays smoothly, and as soon as you do a mouse out it abruptly ends. In all other cases, mouseover and mouseout both are playing fine.

What is the reason why the transition is ending in such manner? How to fix it? ( Fixed: Thanks to @Edwin ). Now, please explain Why it is not working with no changes.

jsbin: http://jsbin.com/oposof , http://jsbin.com/oposof/5 ( I am concerned about the first transition 'Triangle' ).

  #container1 >  div.triangle {
     border-bottom: 80px solid red;
     border-left: 60px solid transparent; 
     border-right: 60px solid transparent;
      width: 0px;
      height: 0px;

    -webkit-transition: all 1.2s ease-in-out;

  }

  #container1 >  div.triangle:hover {
    border-top: 80px solid green;
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent;
  }


  #container1 >  div.triangle:active {
    border-left: 80px solid blue; 
    border-right: 60px solid transparent;

  }



  #container2 > div.testt {
    color: red;
    -webkit-transition: all 1s ease-in-out;
  }

  #container2 > div.testt:hover {
    color:yellow;
  }

  #container3 >  div.circle {
    border-radius: 70px;
    width: 100px;
    height: 100px;
    background: red;
    -webkit-border-radius: 50px;

    -webkit-transition: all 1.2s ease-in-out;

  }

  #container3 >  div.circle:hover {
    -webkit-border-radius: 20px;
    -webkit-transform: rotate(-45deg);
  }

I have used -webkit- , so the above demo will work only on chrome and safari. Added -moz- Now, you can test it on Mozilla too ( hopefully in IE as well ). http://jsbin.com/oposof/5

Answer 1

It seems the abruptness is due to the fact that by default it does not have a border on top, then on hover it suddenly has border on top. So in mouseout, instead of transitioning, what its doing is hiding the top border because there was no initial value to reference for transition.

Try this:

#container1 >  div.triangle {
    border-bottom: 80px solid red;
    border-top: 0 solid green;
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent;
    width: 0px;
    height: 0px;

   -webkit-transition: all 1.2s ease-in-out;
}