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

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

Aktivity (1)
Avatar
BlugW
Redaktor
Avatar
BlugW:28.11.2016 10:47

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.11.2016 10:49
Odpovědět 28.11.2016 10:47
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.com
Avatar
BlugW
Redaktor
Avatar
BlugW:28.11.2016 10:57

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

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

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