鼠标从悬停移动后的 CSS答案

【问题标题】：CSS after mouse is moved from hover鼠标从悬停移动后的 CSS
【发布时间】：2015-09-23 09:57:41
【问题描述】：

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

【问题讨论】：

我认为您对 css 中的 :after 有一个错误概念。这意味着在元素的盒子模型之后显示的内容。这不是我认为您在这里尝试的时间操作。
我现在意识到了这一点，但我读到的每一个文档听起来都像是在这种情况下作为一个事件触发了

标签： html css css-animations

【解决方案1】：

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

.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这里

【讨论】：