鼠標離開后CSS繼續動畫

Question

有人可以幫我做CSS動畫嗎？ MB我也應該使用js嗎？ 我想創建左->右懸停動畫，但是在鼠標離開后，我想繼續左->右而不是右->左動畫。

謝謝

 .button_sliding_bg { color: #31302B; background: #FFF; padding: 12px 17px; margin: 25px; font-family: 'OpenSansBold', sans-serif; border: 3px solid #31302B; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px; display: inline-block; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 0 #31302B; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s; } .button_sliding_bg:hover { box-shadow: inset 100px 0 0 0 #31302B; color: #FFF; } 

 <button class="button_sliding_bg"> Button </button> 

我想要這樣的東西：

解決方法如下：

 window.setTimeout(function() { document.getElementById('btn').style.visibility = 'visible'; }, 400); 

 .button_sliding_bg { visibility:hidden; padding: 12px 17px; margin: 25px; font-family: 'OpenSansBold', sans-serif; border: 3px solid #31302B; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px; display: inline-block; text-align: center; cursor: pointer; animation: animate-out 0.5s 1; animation-fill-mode:forwards; } .button_sliding_bg:hover { animation: animate-in 0.5s 1; animation-fill-mode:forwards; } @keyframes animate-in { 0% { box-shadow: inset 0 0 0 0 #31302B; color:#31302B; background: #FFF; } 100% { box-shadow: inset 100px 0 0 0 #31302B; color:#FFF; background: #FFF; } } @keyframes animate-out { 0% { box-shadow: inset 0 0 0 0 #FFF; background: #31302B; color:#FFF; } 100% { box-shadow: inset 100px 0 0 0 #FFF; background: #31302B; color:#31302B; } } 

 <button id="btn" class="button_sliding_bg"> Button </button> 

Answer 1

如果您不介意頁面加載時它首先運行，則可以使用CSS3的animation屬性來獲取您要實現的目標。 訣竅是結合在懸停時更改animation-name和使用animation-fill-mode來保留所做的更改。 請記住，CSS3的動畫被認為是“實驗性的”，但是，它幾乎完全覆蓋了最新的瀏覽器版本。

JSFIDDLE

CSS

.button_sliding_bg {
    padding: 12px 17px;
    margin: 25px;
    font-family: 'OpenSansBold', sans-serif;
    border: 3px solid #31302B;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    animation-name: animate-out;
    animation-duration: 0.5s;
    animation-repeat-count: 1;
    animation-fill-mode: forwards;
}
.button_sliding_bg:hover {
    animation-name: animate-in;
}

@keyframes animate-in {
    0% {
        box-shadow: inset 0 0 0 0 #31302B;
        color:#31302B;
        background: #FFF;
    }
    100% {
        box-shadow: inset 100px 0 0 0 #31302B;
        color:#FFF;
        background: #FFF;
    }
}
@keyframes animate-out {
    0% {
        box-shadow: inset 0 0 0 0 #FFF; 
        background: #31302B;
        color:#FFF;
    }
    100% {
        box-shadow: inset 100px 0 0 0 #FFF; 
        background: #31302B;
        color:#31302B;
    }
}