Diskuze: Pokračování hover animace po moseleave

JavaScript JavaScript Pokračování hover animace po moseleave

Avatar
BlugW
Redaktor
Avatar
BlugW:

Hoj,

chci udělát něco jako tohle GIF
Mám to teď v CSS3 animate + trochu JS, ale animate není podporován v některých prohlížečích.
Může mi někdo pomoct s JS verzí?

<button id="btn" class="button_sliding_bg">
Button
</button>
.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;
    }
}
window.setTimeout(function() {
document.getElementById('btn').style.visibility = 'visible';
}, 400);

Díky

Editováno 28. listopadu 10:49
Odpovědět 28. listopadu 10:47
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
BlugW
Redaktor
Avatar
BlugW:

https://jsfiddle.net/gmbvgo31/
Takhle je to aspoň s náhledem :)

Nahoru Odpovědět 28. listopadu 10:57
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Ján Timoranský
Redaktor
Avatar
Ján Timoranský:

Nech sa páči, snáď to funguje podľa predstavy. jsFiddle

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 28. listopadu 11:12
Find what you love and let it kill you.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.