为什么我的 CSS 转换会在鼠标移开时突然结束？

Question

我只是测试了一些 CSS 转换（我是 CSS 初学者）。所有过渡都进展顺利。但在其中一个过渡中，当鼠标悬停完成时，过渡会顺利进行，而一旦您将鼠标移开，过渡就会突然结束。在所有其他情况下，鼠标悬停和鼠标移出都运行良好。

到底是什么原因导致转型以这样的方式结束呢？如何修复它？（已修复：感谢@Edwin）。现在，请解释为什么它在没有更改的情况下不起作用。

jsbin： http: //jsbin.com/oposof，http : //jsbin.com/oposof/5（我担心第一个过渡“三角形”）。

  #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-，所以上面的演示仅适用于 chrome 和 safari。添加-moz-现在，您也可以在 Mozilla 上测试它（希望也能在 IE 中测试）。 http://jsbin.com/oposof/5

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