CODEWITHSUNDEEP
css
user4708518
user4708518

Reputation:

CSS, stop hover causing sharp animation

Well, I have set up an animation when someone hovers over a button, and when they do so, the background color, border radius and the font color change. When I hover over it, there is a smooth animation, however when I stop hovering, there is a very sharp animation.

Code:

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

Working example:

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

Does anyone know how I stop this sharp animation from happening?

I have looked on stack overflow and the internet however all I can find is people having this issue, but with javascript or JQuery.

Thanks.

Upvotes: 2

Views: 400

Answers (1)

Matthew Rapati
Matthew Rapati

Reputation: 5696

You need to set the transition declaration on the element you want to animate. Right now it is only on :hover, so the animation only occurs when hovering.

.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

Upvotes: 2

Related Questions