CSS Animation nach Mausklick fortsetzen

Question

Kann mir bitte jemand mit CSS Animation helfen? Mb sollte ich auch js verwenden? Ich möchte Hover Animation links -> rechts erstellen, aber nach dem Verlassen der Maus, möchte ich die Animation links -> rechts nicht rechts -> links fortsetzen.

Dank

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

ich so etwas wie dies wollen:

Hier ist die Lösung:

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

Wenn Sie nicht daran, dass es das erste ausgeführt wird, wenn die Seite geladen wird, Sie animation Eigenschaften des CSS3 verwenden können, um zu bekommen, was Sie erreichen wollen. Der Trick ist die Kombination von animation-name bei Hover und die Verwendung von animation-fill-mode, um die vorgenommenen Änderungen zu erhalten. Denken Sie daran, dass die Animation von CSS3 als "experimentell" betrachtet wird, jedoch in den neuesten Browserversionen 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; 
    } 
}