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 play

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;
}