Jak animować za pomocą CSS

Przyzwyczailiśmy się już do oglądania animacji na stronach internetowych i cieszenia się energią i różnorodnością, jaką wnoszą do projektowania stron internetowych. Przyciągają wzrok, stanowią świetny sposób na dodanie wizualnego zainteresowania do witryny i ogólnie sprawiają, że korzystanie z niej jest bardziej ekscytujące dla użytkowników.

Chociaż tradycyjnie osiąga się to za pomocą GIF-ów, SVG, WebGL i filmów w tle, animacje można również skutecznie tworzyć za pomocą CSS. Obsługa animacji CSS przez przeglądarkę znacznie się poprawiła i staje się dość popularna — kompatybilne przeglądarki to m.in. Firefox 5+, IE 10+, Chrome, Safari 4+ i Opera 12+.

Dzisiaj przeprowadzę Cię przez podstawy tworzenia animacji CSS z demo krok po kroku. Pozostań po tym i sprawdź pięć przykładów animacji. Wszystkie te pomysły będziesz mógł wykorzystać do tworzenia animacji do własnych projektów!

Podstawy animacji CSS

Oczywiście ważne jest, aby omówić podstawy działania animacji, zanim zagłębimy się w pięć zabawnych animacji CSS.
Na przykład klatki kluczowe są kluczowym elementem animacji CSS. Możesz być zaznajomiony z tym terminem, jeśli pracowałeś z Adobe Flash lub masz doświadczenie w edycji wideo. W takim przypadku termin klatka kluczowa jest właśnie tym, co można by pomyśleć: jest to sposób na określenie określonej akcji.

Być może już wcześniej natknąłeś się na @keyframes w arkuszu stylów CSS. Wewnątrz tego @keyframes definiujesz style i etapy animacji. Oto świetny przykład efektu zanikania:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Podstawy utworzonej przed chwilą klatki kluczowej zanikania obejmują:

• Opisowa nazwa: w tym przypadku fadeOut.
• Etapy animacji: Od zostało ustawione na 0%, a Do zostało ustawione na 100%.
• Style CSS, które będą stosowane na każdym etapie.

Domyślnie Od będzie wynosić 0%, a Do będzie wynosić 100%, ponieważ w tym przykładzie nie określono żadnych innych etapów.

Konkretne działania z podwłaściwościami animacji

Musimy zrobić trochę więcej, aby nadać styl rzeczom — musimy nadać styl właściwości animation za pomocą właściwości podrzędnych. Jeśli klatki kluczowe definiują wygląd animacji, właściwości podrzędne animacji definiują określone zasady animacji. Pozwalają one skonfigurować czas, czas trwania i inne kluczowe szczegóły dotyczące przebiegu sekwencji animacji.

Właściwość animacji służy do wywoływania @keyframes wewnątrz selektora CSS. Animacje mogą i często będą mieć więcej niż jedną podwłaściwość. Oto przykłady podwłaściwości:

Współpraca z artystą grafiki ruchomej

Nic tak nie ożywi Twoich projektów jak animacja. Ale jeśli nigdy nie pracowałeś z animatorem lub grafiką ruchową, ruch może wydawać się obcym światem. Jeśli myślisz o p...

• Nazwa animacji: nazwa reguły @keyframes , która opisuje klatki kluczowe animacji. Nazwa fadeOut w poprzednim przykładzie jest przykładem nazwa-animacji.
• Czas trwania animacji: czas, jaki animacja powinna zająć, aby ukończyć jeden pełny cykl.
• Animation-timing-function: czas animacji, w szczególności sposób przejścia animacji przez klatki kluczowe. Ta funkcja ma możliwość ustalenia krzywych przyspieszenia. Przykładami są: linear, easy, easy-in, easy-out, easy-in-out lub sześcienny-bezier .
• Opóźnienie animacji: opóźnienie między momentem załadowania elementu a początkiem animacji.
• Animation-iteration-count: ile razy animacja powinna się powtórzyć. Chcesz, aby animacja trwała wiecznie? Możesz określić nieskończoność , aby powtarzać animację w nieskończoność.
• Kierunek animacji: czy animacja powinna zmieniać kierunek przy każdym przebiegu sekwencji, czy też powracać do punktu początkowego i powtarzać się.
• Tryb wypełnienia animacji: wartości, które są stosowane przez animację zarówno przed, jak i po wykonaniu.
• Animation-play-state: dzięki tej opcji możesz wstrzymać i wznowić sekwencję animacji. Przykłady to brak, do przodu, do tyłu lub oba .

Łącząc to wszystko razem, aby uzyskać najlepszą obsługę przeglądarek

Dużo się tu dzieje, a terminologia może być nieco myląca. Ale teraz wiemy, że klatki kluczowe definiują wygląd animacji, a także różne etapy animacji, a właściwość animacji używa podwłaściwości do definiowania opcji animacji, takich jak opóźnienie, kierunek, synchronizacja i tak dalej.

Prawdopodobnie znasz prefiksy dostawcy lub przeglądarki — są one niezbędne podczas pracy z animacjami. Musimy upewnić się, że mamy najlepszą obsługę przeglądarek. Oto standardowe prefiksy przeglądarki:

• Chrome i Safari: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-

Internet Explorer 10 nie wymaga prefiksu dla przejść, ale wszystkie transformacje wymagają prefiksu. Opera jest opisana, ponieważ rozpoznaje style WebKit.

Początek przejścia

• -webkit-transition
• -moz-transition
• transition

Początek transformacji:

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

Pięć animacji w akcji

Teraz, gdy omówiliśmy już podstawy, stwórzmy trochę kodu do wykorzystania!

Animacja pierwsza: koło do kwadratu

Przyjrzyjmy się szczegółowo tej pierwszej, abyśmy mogli upewnić się, że rozumiemy wszystkie pojęcia, które omówiliśmy do tej pory. Animacja zacznie się jako okrąg i zmieni się w kwadrat.

Tworzenie div na początek to świetny sposób na przetestowanie animacji:

<div class=”animationOne”>
</div>

Teraz skonfigurujmy nasze @keyframes . Ta animacja będzie miała pięć etapów, ponieważ kwadrat ma cztery boki i musimy mieć punkt początkowy 0%. Użyj przedrostków, jak pokazano poniżej, ale w pozostałej części samouczka zachowamy prostotę, korzystając tylko z podstaw.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Teraz utwórzmy kilka stylów, aby określić, jaki będzie promień obramowania na każdym etapie:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Teraz dodaj właściwość background-color , aby pomóc odróżnić każdy etap animacji:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Na koniec zastosujmy animację do testowego div:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

Właściwość animacji jest zwykle napisana skrótowo, więc oto, co faktycznie dzieje się w kodzie:

• Nazwa animacji to circle-to-square .
• Czas trwania animacji to 2s .
• Opóźnienie animacji wynosi 1s .
• Liczba animacji-iteracji jest infinite , więc będzie trwać w nieskończoność.
• A kierunek animacji jest alternate . Oznacza to, że będzie grał od początku do końca i wróci do początku.

Animacja druga: obrót

Ta animacja pozwala na obrót obiektu.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Aby zachować oddzielne projekty animacji, pamiętaj o stworzeniu kolejnego div dla tego drugiego przykładu. Dodałem kolor tła, ponieważ w tym przykładzie dodamy animację do samego div.

Czas trwania tej animacji to dwie sekundy z trzysekundowym opóźnieniem. Liczba animacji iteracji wynosi pięć, więc ten projekt zostanie animowany pięć razy przed zatrzymaniem. Animacja jest odtwarzana w odwrotnej kolejności za każdym razem nieparzystym (1,3,5,… ) i w normalnym kierunku za każdym razem (2,4,6,… ).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animacja trzecia: rozwijanie i migotanie

To świetna animacja dla przycisku, ponieważ bardziej przyciąga wzrok i jest bardziej widoczna w porównaniu z innymi elementami na stronie. Może to być również coś, co warto uwzględnić w stanie :hover .

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Aby użyć tego testu, potrzebujemy następującego div startowego:

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

Animacja czwarta: slajd tekstowy
Dodajmy animację do tekstu. Ten projekt sprawia, że ​​tekst wsuwa się raz od lewej.

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Animacja piąta: zanikanie

Czy masz jakąś niespodziankę? Sprawdź tę animację zanikania treści, która ma się pojawić później. Masz tu wiele opcji: zanikanie może być szybkie lub powolne, zdarzać się raz lub wiele razy i tak dalej.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

Animacje CSS3 są fantastyczne do poruszania i rozwijania Twojej witryny! Teraz, gdy znasz już podstawowe koncepcje tworzenia animacji, możliwości animacji są nieograniczone. Co będziesz animować?