Articles
Wprowadzenie do CSS
Właściwości CSS związane z animacjami

Właściwości CSS związane z animacjami

Ten artykuł wyjaśnia właściwości CSS związane z animacjami.

Możesz nauczyć się, jak używać i pisać składnię właściwości @keyframes, animation i transition.

YouTube Video

HTML do podglądu

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animacja i przejście

Reguła @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes jest używane w animacjach CSS do określania, jak style zmieniają się w trakcie animacji. W @keyframes zmiany stylów od początku do końca animacji są określane za pomocą procentów czasu lub słów kluczowych (from i to).

  • To jest przykład animacji, w której element przesuwa się z lewej na prawą stronę i wraca do pierwotnej pozycji.
  • W tym przykładzie po @keyframes napisano slide, co definiuje animację o nazwie slide.
  • 0% oznacza początek animacji, gdzie translateX(0) ustawia element w jego pierwotnym położeniu.
  • 50% oznacza środek animacji, gdzie element przesuwa się o 200px w prawo za pomocą translateX(200px).
  • 100% oznacza koniec animacji, gdzie element wraca do swojej pierwotnej pozycji.
  • W klasie box-animation-slide właściwość animation jest używana do zastosowania animacji slide w odstępach 3 sekundowych.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Możesz precyzyjnie kontrolować style w trakcie animacji. Określając procenty, możesz stosować różne style w dowolnych momentach.
    • W tym przykładzie kolor stopniowo zmienia się z czerwonego na niebieski, zielony, żółty i z powrotem na czerwony.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • W tym przykładzie from jest równoważne 0%, a to jest równoważne 100%. To pozwala na definiowanie prostych animacji.

Podstawowa składnia 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: Nazwa animacji. Jest to określane za pomocą właściwości animation lub animation-name.
  • Procenty lub słowa kluczowe: Użyj procentów od 0% do 100% lub słów kluczowych from (równoważne 0%) i to (równoważne 100%).

Właściwość animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

Właściwość animation służy do stosowania animacji na elementach. Animacje określają, jak zestaw stylów CSS zmienia się w czasie. Dzięki właściwości animation możesz kontrolować czas trwania, zachowanie, opóźnienie, liczbę powtórzeń i inne cechy animacji.

  • Klasa box-animation-ease-in-out określa slide jako animation-name i wykorzystuje animację slide zdefiniowaną w @keyframes.
    • 3s to animation-duration, co oznacza, że każdy cykl animacji trwa 3 sekundy.
    • ease-in-out to animation-timing-function, co powoduje, że animacja rozpoczyna się powoli, przyspiesza, a na końcu ponownie zwalnia.
    • infinite to animation-iteration-count, co oznacza, że animacja będzie powtarzana w nieskończoność.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • Klasa box-animation-alternate określa color-change jako animation-name i wykorzystuje animację color-change zdefiniowaną w @keyframes.
    • 1s po ease-in-out to animation-delay, określające opóźnienie przed rozpoczęciem animacji. Animacja rozpocznie się po 1 sekundzie.
    • 3 po 1s to animation-iteration-count, co oznacza, że animacja powtórzy się 3 razy.
    • alternate to animation-direction, określające kierunek odtwarzania animacji. alternate oznacza, że animacja jest odtwarzana naprzemiennie.

Kompozycja właściwości animation

Właściwość animation jest skrótem, który łączy kilka podwłaściwości w jedną. Oto główne podwłaściwości:.

  • Właściwość animation-name: Określa nazwę animacji do zastosowania. Musi odpowiadać nazwie animacji zdefiniowanej w @keyframes.
  • Właściwość animation-duration: Określa czas potrzebny na zakończenie jednego cyklu animacji. Jednostki czasu to sekundy (s) lub milisekundy (ms).
  • Właściwość animation-timing-function: Określa krzywą prędkości animacji. Stosuje się wartości takie jak: ease, linear, ease-in, ease-out, ease-in-out, itp.
    • Określenie ease sprawia, że animacja zaczyna się powoli, przyspiesza, a następnie ponownie zwalnia na końcu.
    • Określenie linear powoduje, że animacja przebiega z stałą prędkością od początku do końca.
    • Określenie ease-in powoduje, że animacja zaczyna się powoli, a kończy szybko.
    • Określenie ease-out powoduje, że animacja zaczyna się szybko, a kończy powoli.
    • Określenie ease-in-out powoduje, że animacja zaczyna się powoli, przyspiesza i kończy powoli.
  • Właściwość animation-delay określa opóźnienie przed rozpoczęciem animacji. Jednostką czasu są sekundy lub milisekundy.
  • Właściwość animation-iteration-count określa liczbę powtórzeń animacji. Określenie infinite spowoduje, że animacja będzie powtarzana w nieskończoność.
  • Właściwość animation-direction określa kierunek odtwarzania animacji. Opcje obejmują normal (kierunek do przodu), reverse (kierunek wstecz), alternate (naprzemienne odtwarzanie) i alternate-reverse (naprzemienne odtwarzanie zaczynając od tyłu).
  • Właściwość animation-fill-mode określa stan animacji przed jej rozpoczęciem i po jej zakończeniu. Możesz określić jedno z none, forwards, backwards lub both.
  • Właściwość animation-play-state określa, czy animacja jest odtwarzana czy wstrzymana. Możesz określić running lub paused.

Podsumowanie

Właściwość animation to potężne narzędzie do dynamicznej zmiany stylu elementów. Używając @keyframes, możesz określić, jak style zmieniają się w czasie, oraz kontrolować szczegółowe zachowanie animacji za pomocą każdej podwłaściwości animation.

Właściwość transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

Właściwość transition służy do stosowania efektów animacji do zmian stylu CSS. Pozwala, aby zmiany wydawały się płynne podczas zmian stanu, takich jak hover, focus, active, lub gdy style są dynamicznie zmieniane przez JavaScript.

Przyjrzyjmy się przykładowi klasy transition-box, w której kolor tła zmienia się płynnie podczas najeżdżania myszką na przycisk. - W klasie transition-box właściwość transition stosuje 2-sekundowe przejście do zmiany koloru tła. Zmiana została określona jako ease, co sprawia, że jest płynna. - Pseudo-klasa hover zmienia kolor tła z lightgray na steelblue, gdy myszka znajduje się nad przyciskiem. Ta zmiana następuje płynnie w ciągu 2 sekund określonych w klasie transition-box.

Można zastosować transition do wielu właściwości jednocześnie. - W przykładzie klasy transition-2-properties kolor tła zmienia się w ciągu 5 sekund, a szerokość zmienia się w ciągu 0,5 sekundy.

Podstawowa składnia 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • Property określa, do których właściwości CSS powinna być zastosowana animacja. Ustawienie all powoduje zastosowanie animacji do wszystkich właściwości.
  • Duration określa czas trwania animacji do jej zakończenia. Określ, używając sekund (s) lub milisekund (ms).
  • Timing-function określa zmiany prędkości animacji. Możesz użyć opcji takich jak ease, linear, ease-in, ease-out, ease-in-out itd.
  • Delay określa czas opóźnienia przed rozpoczęciem animacji. Określ w sekundach lub milisekundach.

Szczegółowe właściwości transition. 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

Transition może być również stosowany jako poszczególne właściwości, jak poniżej.

  • transition-property: Określa właściwość, do której ma być zastosowana animacja.
  • transition-duration: Określa czas trwania animacji do jej zakończenia.
  • transition-timing-function: Określa prędkość postępu animacji. Możesz używać opcji takich jak ease, linear, ease-in, ease-out, ease-in-out.
  • transition-delay: Określa czas opóźnienia przed rozpoczęciem animacji.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z efektami filtrów