CODEWITHSUNDEEP
cssanimation
Olexiy Pyvovarov
Olexiy Pyvovarov

Reputation: 890

CSS3 animation - the full cycle

I've just got a problem making the CSS3 animations.

I've written the following code:

@-webkit-keyframes menu_styling_hover 
    from 
    {
        border-bottom-color:#F5B7B8;
        padding-top:0px;
        padding-bottom:0px;
    }
    to 
    {
        border-bottom-color:#FB7A7D;
        padding-top:6px;
        padding-bottom:6px;
    }
}

And I've attached this keyframe to the div with hover effect;

-webkit-animation:menu_styling_hover 0.3s linear;
animation:menu_styling_hover 0.3s linear;

It works fine. But when I unhover the element - it becomes to have previous characteristics without any animation of hiding it. So when the div is hovered, it has paddings 6px, and when I move mouse from this div - paddings become 0px without making animation (5..4..3..2..1). How to do such thing?

Upvotes: 1

Views: 65

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241198

It seems like you are after a CSS transition as opposed to an animation.

Just set the initial styling, and change it when hovering over the element like so:

Example Here

.element {
    height:40px;
    border: 2px solid;
    border-bottom-color:#F5B7B8;
    padding-top:0px;
    padding-bottom:0px;
    transition: all 0.3s linear;
}
.element:hover {
    border-bottom-color:#FB7A7D;
    padding-top:6px;
    padding-bottom:6px;
}

Upvotes: 1

Related Questions