Question

我在制作CSS3动画时遇到了问题。

我已经写了以下代码：

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

我已将此关键帧附加到具有悬停效果的div;

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

工作正常。但是当我解开元素时 - 它变得具有先前的特征而没有任何隐藏它的动画。所以当div徘徊时，它有6px的填充，当我从这个div移动鼠标时 - 填充变为0px而不制作动画（5..4..3..2..1）。怎么做这个？

Answer 1

好像你是在CSS transition而不是动画。

只需设置初始样式，并将鼠标悬停在元素上时进行更改：

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

CSS3动画 - 完整循环

1 个答案: