Utilizziamo i cookie per migliorare la tua esperienza sul sito

Accesso/Registrazione->

animation-timing-function

Wyobraź sobie, jak starożytni Egipcjanie transportowali ogromne bloki kamienne do budowy piramid. Niektóre bloki sunęły ze stałą, równą prędkością po drewnianych szynach - to odpowiednik

linear

. Inne zaczynały powoli, gdy robotnicy dopiero nabierali rozpędu, a potem przyspieszały - to

ease-in

. Jeszcze inne pędziły na początku, ale zwalniały przy precyzyjnym pozycjonowaniu - to

ease-out

Właściwość

animation-timing-function

w CSS umożliwia właśnie taką kontrolę tempa animacji, definiując, jak wartości pośrednie są obliczane w trakcie animacji. Pozwala to na tworzenie różnych efektów, takich jak przyspieszenie, zwolnienie czy niestandardowe krzywe przejść.

Predefiniowane Funkcje Tempa

Istnieje wiele predefiniowanych wartości dla

animation-timing-function

, które można wykorzystać do osiągnięcia różnych efektów.

Linear

Animacja ma stałe tempo od początku do końca.

1.animation-linear {
2  animation-timing-function: linear;
3}

Ease

Animacja zaczyna się powoli, przyspiesza w środku, a następnie zwalnia pod koniec.

1.animation-ease {
2  animation-timing-function: ease;
3}

Ease-in

Animacja zaczyna się powoli, a następnie przyspiesza.

1.animation-ease-in {
2  animation-timing-function: ease-in;
3}

Ease-out

Animacja zaczyna się szybko, a następnie zwalnia.

1.animation-ease-out {
2  animation-timing-function: ease-out;
3}

Ease-in-out

Animacja zaczyna się powoli, przyspiesza w środku, a następnie znowu zwalnia.

1.animation-ease-in-out {
2  animation-timing-function: ease-in-out;
3}

Niestandardowe Krzywe Beziera

Dla bardziej zaawansowanych efektów, możesz zdefiniować własną krzywą Beziera, używając funkcji

cubic-bezier

1.animation-custom {
2  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
3}

Te cztery wartości reprezentują parametry krzywej Beziera, które kontrolują kształt funkcji przejścia.

Przykładowe Animacje z Wykorzystaniem animation-timing-function

Przykład 1: Animacja ze Stałym Tempem (Linear)

1@keyframes slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.linear-animation {
7  position: relative;
8  animation: slide 2s linear infinite;
9}

Przykład 2: Animacja z Krzywą Ease

1@keyframes ease-slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.ease-animation {
7  position: relative;
8  animation: ease-slide 2s ease infinite;
9}

Przykład 3: Niestandardowa Krzywa Beziera

1@keyframes custom-slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.custom-animation {
7  position: relative;
8  animation: custom-slide 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
9}

HTML dla Przykładów

Aby przetestować te animacje, stwórz plik HTML i dodaj odpowiednie elementy z przypisanymi klasami:

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>Animacje CSS</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <div class="linear-animation">Linear Animation</div>
11  <div class="ease-animation">Ease Animation</div>
12  <div class="custom-animation">Custom Bezier Animation</div>
13</body>
14</html>

Zadanie: Stwórz Animację Wykorzystując Różne Funkcje Tempa

Twoim zadaniem jest stworzenie animacji dla trzech różnych elementów. Każdy element powinien wykorzystywać inną funkcję tempa

animation-timing-function

Animacja Linear: Element powinien przesuwać się w poziomie przy stałym tempie.
Animacja Ease-in-out: Element powinien przesuwać się w poziomie, zaczynając powoli, przyspieszając w środku i zwalniając pod koniec.
Animacja z Niestandardową Krzywą Beziera: Element powinien przesuwać się w poziomie, wykorzystując niestandardową krzywą Beziera.

Kroki do Wykonania:

Utwórz plik HTML i dodaj trzy elementy, które będą animowane.
Zdefiniuj
```
@keyframes
```
dla animacji przesuwającej elementy w poziomie.
Zastosuj odpowiednie właściwości
```
animation-timing-function
```
do każdego z elementów.
Dodaj style do pliku CSS i załaduj go w pliku HTML.

Przykład:

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>Animacje CSS</title>
7  <style>
8    @keyframes slide {
9      0% { left: 0; }
10      100% { left: 100px; }
11    }
12
13    .animation-container {
14      position: relative;
15      width: 100px;
16      height: 50px;
17      margin: 20px;
18      background-color: lightblue;
19    }
20
21    .linear-animation {
22      animation: slide 2s linear infinite;
23    }
24
25    .ease-in-out-animation {
26      animation: slide 2s ease-in-out infinite;
27    }
28
29    .custom-animation {
30      animation: slide 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
31    }
32  </style>
33</head>
34<body>
35  <div class="animation-container linear-animation">Linear</div>
36  <div class="animation-container ease-in-out-animation">Ease-in-out</div>
37  <div class="animation-container custom-animation">Custom</div>
38</body>
39</html>

Dzięki właściwości

animation-timing-function

, masz pełną kontrolę nad tempem animacji, co pozwala na tworzenie bardziej zaawansowanych i interesujących efektów wizualnych na stronach internetowych.

Jak mawiał Mohamed: "Tempo animacji to jak tempo budowy piramidy - zbyt szybkie i wszystko się rozpadnie, zbyt wolne i nikt nie doczeka efektu. Znajdź idealny balans dzięki

animation-timing-function

Przetestuj różne funkcje tempa w edytorze poniżej:

Vai a CodeWorlds→