Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailemVyřešeno CSS - animace

Zdarec. Mám udělanou animaci tak, že když najedu na input, tak se mi změní barva a pozadí. To všechno krásně jede. Ale jak to udělám tak, aby když na inputu nebudu mět najeté, se spustil zpětný proces?
code:

@keyframes blue {
	0% {background: #fff; color: #1b75bb;}
	100% {background: #1b75bb; color: #fff;}
}
@keyframes red {
	0% {background: #fff; color: #e41c3f;}
	100% {background: #e41c3f; color: #fff;}
}

.i_order, .i_voucher {background: #fff;}
.i_order:hover {animation: blue 0.5s linear; animation-fill-mode: forwards;}

Předem děkuji za odpovědi.

Předmět Autor Datum
Přes javascript, událost onmouseout. nový
Flash_Gordon 26.07.2016 03:41
 Flash_Gordon
Na jednoduché prechody ti stačí nastaviť transition (transition-property, transition-duration, trans… nový
los 26.07.2016 07:34
 los
Díky. Transition funguje. poslední
Vilak 26.07.2016 13:18
 Vilak

Na jednoduché prechody ti stačí nastaviť transition (transition-property, transition-duration, transition-timing-function), napr. (netestované):

.i_order {
    background: #fff;
    color: #1b75bb;
    transition: all .2s ease-in;
}

.i_order:hover {
    background: #1b75bb;
    color: #fff;
}

Animácie by si potreboval, keby si chcel robiť zložitejšie veci.

Zpět do poradny Odpovědět na původní otázku Nahoru