CSS
Animacje

Składnia

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

Parametry

Animacje z właściwością przejścia

Przydatna w przypadku prostych animacji właściwość transition CSS umożliwia animację właściwości CSS na podstawie liczb między stanami.

Przykład

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Pokaż rezultat

Domyślnie najechanie kursorem na element z klasą .Example spowoduje natychmiastowe przeskoczenie wysokości elementu do 120px a koloru tła na czerwony ( #ff0000 ).

Dodając właściwość transition , możemy spowodować, że zmiany te pojawią się z czasem:

.Example{
    ...
    transition: all 400ms ease;
}

Pokaż rezultat

all wartości dotyczą przejścia do wszystkich kompatybilnych (opartych na liczbach) właściwości. To słowo kluczowe można zastąpić dowolną zgodną nazwą właściwości (taką jak height lub top ).

400ms określa czas przejścia. W takim przypadku zmiana wysokości elementu zajmie 400 milisekund.

Wreszcie, ease wartości jest funkcją animacji, która określa sposób odtwarzania animacji. ease oznacza rozpoczęcie spowolnienia, przyspieszenie, a następnie zakończenie spowolnienia ponownie. Inne wartości są linear , ease-out i ease-in .

Kompatybilność z różnymi przeglądarkami

Właściwość transition jest ogólnie dobrze obsługiwana we wszystkich głównych przeglądarkach, z wyjątkiem IE 9. We wcześniejszych wersjach przeglądarek Firefox i przeglądarek opartych na Webkit należy używać prefiksów dostawcy, takich jak:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Uwaga: Właściwość transition może animować zmiany między dowolnymi dwiema wartościami liczbowymi, niezależnie od jednostki. Można także przejścia między jednostkami, jak 100px do 50vh . Nie może jednak przechodzić między liczbą a wartością domyślną lub automatyczną, np. 100px wysokość elementu ze 100 100px na auto .

Zwiększanie wydajności animacji za pomocą atrybutu „will-change”

Podczas tworzenia animacji i innych akcji obciążających procesor graficzny ważne jest, aby zrozumieć atrybut will-change .

Zarówno klatki kluczowe CSS, jak i właściwość transition używają przyspieszenia GPU. Wydajność zwiększa się poprzez odciążenie obliczeń do GPU urządzenia. Odbywa się to poprzez tworzenie warstw farby (części strony, które są indywidualnie renderowane), które są odciążane na GPU w celu obliczenia. Właściwość will-change informuje przeglądarkę, co będzie animowana, umożliwiając przeglądarce tworzenie mniejszych obszarów malowania, zwiększając w ten sposób wydajność.

Właściwość will-change przyjmuje animowaną listę właściwości rozdzielanych przecinkami. Na przykład, jeśli planujesz transformację obiektu i zmianę jego krycia, możesz określić:

.Example{
    ...
    will-change: transform, opacity;
}

Uwaga: Używaj will-change oszczędnie. Ustawienie will-change dla każdego elementu na stronie może powodować problemy z wydajnością, ponieważ przeglądarka może próbować utworzyć warstwy farby dla każdego elementu, znacznie zwiększając ilość przetwarzania wykonywanego przez GPU.

Animacje z klatkami kluczowymi

W przypadku wieloetapowych animacji CSS możesz utworzyć CSS @keyframes . Klatki kluczowe umożliwiają zdefiniowanie wielu punktów animacji, zwanych klatkami kluczowymi, w celu zdefiniowania bardziej złożonych animacji.

Podstawowy przykład

W tym przykładzie stworzymy podstawową animację tła, która będzie przełączać się między wszystkimi kolorami.

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Pokaż rezultat

Należy tutaj zwrócić uwagę na kilka różnych rzeczy. Po pierwsze, aktualna składnia @keyframes .

@keyframes rainbow-background{

To ustawia nazwę animacji na rainbow-background .

0%     { background-color: #ff0000; }

Jest to definicja klatki kluczowej w animacji. Pierwsza część, 0% w przypadku, określa, gdzie znajduje się klatka kluczowa podczas animacji. 0% oznacza, że jest to 0% całkowitego czasu animacji od początku.

Animacja automatycznie przechodzi między klatkami kluczowymi. Tak więc, ustawiając następny kolor tła na 8.333% , animacja płynnie zajmie 8.333% czasu na przejście między tymi klatkami kluczowymi.

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Ten kod dołącza naszą animację do wszystkich elementów, które mają klasę .RainbowBackground .

Rzeczywista właściwość animacji przyjmuje następujące argumenty.

• nazwa-animacji : nazwa naszej animacji. W tym przypadku rainbow-background
• czas trwania animacji: czas trwania animacji, w tym przypadku 5 sekund.
• animacja-liczba iteracji (opcjonalnie) : liczba pętli animacji. W takim przypadku animacja będzie kontynuowana przez czas nieokreślony. Domyślnie animacja zostanie odtworzona raz.
• animacja-opóźnienie (Opcjonalnie) : Określa czas oczekiwania przed rozpoczęciem animacji. Domyślnie wynosi 0 sekund i może przyjmować wartości ujemne. Na przykład -2s uruchamia animację na 2 sekundy w pętli.
• animacja-funkcja synchronizacji (opcjonalnie) : Określa krzywą prędkości animacji. Domyślnie jest to ease , gdy animacja zaczyna się powoli, staje się szybsza, a kończy powoli.

W tym konkretnym przykładzie zarówno klatki kluczowe 0% i 100% określają { background-color: #ff0000; } . Gdziekolwiek dwie lub więcej klatek kluczowych współdzieli stan, można je określić w pojedynczej instrukcji. W takim przypadku dwie linie 0% i 100% można zastąpić jedną linią:

0%, 100%     { background-color: #ff0000; }

Kompatybilność z różnymi przeglądarkami

W przypadku starszych przeglądarek opartych na WebKit należy użyć prefiksu dostawcy zarówno w deklaracji @keyframes i we właściwości animation :

@-webkit-keyframes{}

-webkit-animation: ...

Przykłady składni

Nasz pierwszy przykład składni pokazuje stenografię animacji przy użyciu wszystkich dostępnych właściwości / parametrów:

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

Nasz drugi przykład jest nieco prostszy i pokazuje, że niektóre właściwości można pominąć:

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

Nasz trzeci przykład pokazuje najbardziej minimalną deklarację. Pamiętaj, że nazwa animacji i czas trwania animacji muszą być zadeklarowane:

  animation: 3s         slidein;
  /*         duration | name */

Warto również wspomnieć, że przy użyciu skrótu animacji kolejność właściwości ma znaczenie. Oczywiście przeglądarka może mylić twój czas trwania z opóźnieniem.

Jeśli zwięzłość nie jest twoją rzeczą, możesz także pominąć skrót własności i wypisać każdą właściwość osobno:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;