Question

在CSS中，悬停事件正在触发。但是，当它是动画时，当鼠标从对象上移回（在这种情况下是一个按钮）时，它会返回到正常状态而不返回动画。这导致它看起来真的跳跃和违背我拍摄的主题。所以，我需要一个在悬停事件之后触发的事件，就像我认为的那样：.button-default:hover:after {}，但是没有像我期望的那样工作。我的CSS下面是：

.button-default {
    width: 40vw;
    height: 5vh;
    color: white;
    background: transparent;
    border: solid 2px;
    border-radius: 5px;
    border-color: white;
}

.button-default:hover {
    animation-name: animate-button;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.button-default:hover:after {
    animation-name: normalize-button;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes normalize-button {
    from {
        color: blue;
        background: white;
        border-color: blue;
    }
    to {
        width: 40vw;
        height: 5vh;
        color: white;
        background: transparent;
        border: solid 2px;
        border-radius: 5px;
        border-color: white;
    }
}

@keyframes animate-button {
    from {
        .button-default;
    }
    to {
        color: blue;
        background: white;
        border-color: blue;
    }
}

body {
    font-family: 'Oswald', sans-serif;
    /*background: url('../images/novam.png') no-repeat center;*/
    background: black;
    background-size: cover;
}

Answer 1

由于您的动画只需要两个阶段，您可以使用css过渡而不是动画来获得该效果。和FYI，之后是伪元素。这不是事件。

.button-default {
    width: 40vw;
    height: 5vh;
    color: white;
    background: transparent;
    border: solid 2px;
    border-radius: 5px;
    border-color: white;
     -webkit-transition: all 2s ease;
    transition: all 2s ease;
     -moz-transition: all 2s ease; 
}

.button-default:hover {
        color: blue;
    background: white;
    border-color: blue;
}

Fiddle此处

鼠标从悬停移动后的CSS

1 个答案: