Animace

CSS animace umožňují plynulé přechody mezi různými stavy CSS vlastností. Můžete vytvářet složité animace bez použití JavaScriptu, což je efektivní a výkonné.

Animace se skládají ze dvou hlavních částí:

1. Pravidlo @keyframes

   Pravidlo @keyframes definuje sekvenci animace. Dáte animaci unikátní jméno a uvnitř definujete, jaké CSS vlastnosti se mají měnit v různých fázích animace. Fáze se definují procenty (od 0% do 100%) nebo klíčovými slovy from (což je 0%) a to (což je 100%).

   @keyframes fade-in-out {
       0% {
           opacity: 0; /* Na začátku je element neviditelný */
       }
       50% {
           opacity: 1; /* V polovině animace je plně viditelný */
       }
       100% {
           opacity: 0; /* Na konci je opět neviditelný */
       }
   }
   
   @keyframes slide-right {
       from {
           transform: translateX(-100%); /* Začíná mimo obrazovku vlevo */
       }
       to {
           transform: translateX(0); /* Posune se na původní místo */
       }
   }

2. Vlastnost animation

   Tato vlastnost se aplikuje na element, který chcete animovat, a odkazuje na dříve definované @keyframes pravidlo. Má několik dílčích vlastností:

   • animation-name: Jméno @keyframes pravidla, které se má použít.

     .box {
         animation-name: fade-in-out;
     }

   • animation-duration: Jak dlouho animace trvá (např. 2s pro 2 sekundy, 500ms pro 500 milisekund).

     .box {
         animation-duration: 4s;
     }

   • animation-timing-function: Definuje rychlostní křivku animace (jak se rychlost animace mění v průběhu času).
     • linear: Stejná rychlost od začátku do konce.
     • ease: Pomalu začíná, zrychluje uprostřed a pomalu končí (výchozí).
     • ease-in: Pomalu začíná.
     • ease-out: Pomalu končí.
     • ease-in-out: Pomalu začíná i končí.
     • cubic-bezier(n,n,n,n): Vlastní rychlostní křivka.

     .box {
         animation-timing-function: ease-in-out;
     }

   • animation-delay: Zpoždění před spuštěním animace.

     .box {
         animation-delay: 1s; /* Animace začne po 1 sekundě */
     }

   • animation-iteration-count: Kolikrát se má animace opakovat. Může být číslo nebo infinite pro nekonečné opakování.

     .box {
         animation-iteration-count: infinite;
     }

   • animation-direction: Určuje, zda se má animace přehrávat dopředu, dozadu nebo střídavě.
     • normal: Dopředu (výchozí).
     • reverse: Dozadu.
     • alternate: Přehrává se dopředu a pak dozadu.
     • alternate-reverse: Přehrává se dozadu a pak dopředu.

     .box {
         animation-direction: alternate;
     }

   • animation-fill-mode: Definuje styl, který se aplikuje na element, když animace není aktivní (před začátkem nebo po skončení).
     • none: Žádný styl (výchozí).
     • forwards: Element si ponechá styly z posledního snímku animace.
     • backwards: Element získá styly z prvního snímku animace před jejím spuštěním.
     • both: Aplikuje forwards i backwards.

     .box {
         animation-fill-mode: forwards;
     }

   • animation-play-state: Určuje, zda je animace running (běží) nebo paused (pozastavená).

     .box {
         animation-play-state: paused;
     }

Zkrácený zápis pro animace (animation)

Všechny výše uvedené vlastnosti (kromě animation-play-state) lze zapsat do jednoho zkráceného zápisu animation. Pořadí je důležité!

.moje-animace {
    animation: slide-right 2s ease-out 1s infinite alternate forwards;
    /* název trvání rychlostní-křivka zpoždění počet-opakování směr vyplnění-režim */
}

Animace a pseudo-třídy

Často se animace spouštějí při interakci uživatele, například při najetí myší (:hover).

.tlacitko {
    transition: transform 0.3s ease-out; /* Plynulý přechod pro transformace */
}
.tlacitko:hover {
    transform: scale(1.1); /* Zvětší se při najetí myší */
}

/* Složitější animace s hoverem */
.animovany-box {
    background-color: blue;
    width: 100px;
    height: 100px;
    transition: background-color 0.5s ease; /* Plynulý přechod barvy */
}
.animovany-box:hover {
    animation: pulzovani 1s infinite alternate; /* Spustí animaci při najetí myší */
    background-color: red; /* Změní barvu hned */
}

@keyframes pulzovani {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

CSS animace jsou velmi mocným nástrojem pro přidání dynamiky a interaktivity vašemu webu, aniž byste museli psát složitý JavaScript kód. Experimentujte s různými vlastnostmi a kombinacemi pro dosažení požadovaných efektů!