CSS，停止悬停导致锐利的动画

Question

好吧，当有人将鼠标悬停在按钮上时，我已经设置了一个动画，当他们这样做时，背景颜色、边框半径和字体颜色都会发生变化。当我将鼠标悬停在它上面时，会有一个流畅的动画，但是当我停止悬停时，会有一个非常清晰的动画。

代码:

.button {
    text-align:center;
    background:#ccc;
    display:inline-block;
    position:relative;
    text-transform:uppercase;
    margin:25px;
    border:solid #B26B24;
    background:none;
    color:#fff;
    border-top-left-radius:17px;
    border-top-right-radius:17px;
    border-bottom-left-radius:17px;
    border-bottom-right-radius:17px;
    -moz-border-radius-topleft:17px;
    -moz-border-radius-topright:17px;
    -moz-border-radius-bottomleft:17px;
    -moz-border-radius-bottomright:17px;
    -webkit-border-top-left-radius:17px;
    -webkit-border-top-right-radius:17px;
    -webkit-border-bottom-left-radius:17px;
    -webkit-border-bottom-right-radius:17px;
}

.button:hover {
    background-color:#ffffff;
    color:#161616;
    font-size:18px;
    border-top-left-radius:75px;
    border-top-right-radius:75px;
    border-bottom-left-radius:75px;
    border-bottom-right-radius:75px;
    transition: 0.75s;
    -webkit-transition: 0.75s;
    -ms-transition: 0.75s;
}

.button-text {
    padding:0 25px;
    line-height:56px;
    letter-spacing:3px;
}

工作示例:

http://codepen.io/Riggster/pen/eNppgJ

有谁知道我如何阻止这种尖锐的动画发生？

我查看了堆栈溢出和互联网，但我能找到的只是有人遇到这个问题，但使用的是 javascript 或 JQuery。

谢谢。

Answer 1

您需要在要设置动画的元素上设置transition 声明。现在它只在 :hover 上，所以动画只在悬停时出现。

.button {
    transition: 0.75s;
    -webkit-transition: 0.75s;
    -ms-transition: 0.75s;
    /* etc. */
}

.button:hover {
    /* no transition declaration */        

    background-color: #ffffff;
    color: #161616;
    font-size: 18px;
    border-top-left-radius: 75px;
    border-top-right-radius: 75px;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
}

Updated Codepen