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

あなたは、ページのロード時に、それが最初に実行されることを念頭にいけない場合、あなたはあなたが達成しようとしているものを手に入れるためにCSS3のanimationプロパティを使用することができます。このトリックは、ホバー上で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; 
    } 
}