Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
Bogdan
Redaktor
Avatar
Bogdan: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
Avatar
Bogdan
Redaktor
Avatar
Bogdan: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
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.