CSS продолжение анимации после mouseleave

Question

Может кто-нибудь, пожалуйста, помогите мне с анимацией css? Mb Я должен использовать js тоже? Я хочу создать анимацию hover влево-> вправо, но после ухода мыши я хочу продолжить анимацию left-> right not right-> left.

Благодаря

.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; 
 
\t -webkit-transition: all ease 0.8s; 
 
\t -moz-transition: all ease 0.8s; 
 
\t 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; 
 
\t animation-fill-mode:forwards; 
 
} 
 
.button_sliding_bg:hover { 
 
    animation: animate-in 0.5s 1; 
 
\t animation-fill-mode:forwards; 
 
} 
 

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

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

Answer 1

Если вы не возражаете, что он бежит первый при загрузке страницы, вы можете использовать animation свойства CSS3, чтобы получить то, что вы пытаетесь достичь. Хитрость - это комбинация изменения animation-name при зависании и использовании animation-fill-mode, чтобы сохранить сделанные изменения. Имейте в виду, что анимация CSS3 считается «экспериментальной», однако она имеет almost complete coverage в последних версиях браузера.

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