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:

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

Kroki do Wykonania:

1. Utwórz plik HTML i dodaj trzy elementy, które będą animowane.
2. Zdefiniuj @keyframes dla animacji przesuwającej elementy w poziomie.
3. Zastosuj odpowiednie właściwości animation-timing-function do każdego z elementów.
4. 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:

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #1a0a2e, #2d1b4e);
10  color: white;
11  min-height: 100vh;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15}
16
17.scene {
18  text-align: center;
19  width: 100%;
20  max-width: 600px;
21  padding: 20px;
22}
23
24h2 {
25  margin-bottom: 30px;
26  color: #f0c040;
27}
28
29.river {
30  background: linear-gradient(180deg, #1565c0, #0d47a1);
31  height: 120px;
32  border-radius: 10px;
33  display: flex;
34  align-items: center;
35  overflow: hidden;
36  position: relative;
37}
38
39.boat {
40  font-size: 24px;
41  background: #8d6e2e;
42  color: white;
43  padding: 10px 20px;
44  border-radius: 8px;
45  position: relative;
46  white-space: nowrap;
47  /* Dodaj animacje tutaj */
48  /* Uzyj @keyframes sail z translateX */
49  /* animation: sail 8s linear infinite alternate; */
50}
51
52/* Zdefiniuj @keyframes sail */
53/* 0% { transform: translateX(-100px); } */
54/* 100% { transform: translateX(400px); } */
55
56.hint {
57  margin-top: 20px;
58  color: #aaa;
59  font-style: italic;
60}