Geek asks and answers

Why does my CSS transition end abruptly on mouse output?

I just tested a few CSS transitions (I'm new to CSS). All transitions go smoothly. But in one of the transitions, when the mouse hover occurs, the transition plays smoothly, and as soon as you push it, it abruptly ends. In all other cases, the mouse and mouse play as well.

What is the reason why the transition ends this way? How to fix it? (Fixed: thanks @Edwin). Now explain why it does not work without any changes.

jsbin: http://jsbin.com/oposof , http://jsbin.com/oposof/5 (I’m 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);
  }

-webkit-, . -moz- Mozilla (, IE). http://jsbin.com/oposof/5

+3
1

, , , . mouseout , , , , , .

:

#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;
}
+4

More articles:


All Articles