CSS - animacje
Co to są animacje CSS?
- Animacja umożliwia stopniowe przechodzenie elementu z jednego stylu do drugiego.
- Możesz zmienić dowolną liczbę właściwości CSS, ile razy chcesz.
- Aby użyć animacji CSS, musisz najpierw określić kilka klatek kluczowych dla animacji.
- Klatki kluczowe zawierają style, które element będzie miał w określonych momentach.
Reguła @keyframes
W regule @keyframes tworzysz animację - nadajesz jej nazwę.
Obiekt będzie stopniowo zmieniać się od bieżącego stylu do nowego w określonych momentach.
Aby animacja działała, musisz powiązać animację z elementem oraz określić właściwości animacji poprzez nadanie wartości właściwościom:
animation-name- nazwa animacji utworzona w @keyframesanimation-duration- czas trwania animacji w sekundach np. 4s. Jeśli nie zostanie określona, animacja nie wykonana się, ponieważ wartość domyślna to 0s (0 sekund).animation-delay- opóźnienie uruchomienia animacji. Dopuszczalne są również wartości ujemne. Jeśli użyjesz wartości ujemnych, animacja rozpocznie się tak, jakby była odtwarzana przez N sekund.animation-iteration-count- określa, ile razy animacja powinna zostać uruchomiona. Jeśli użyjemy wartościinfinite, animacja będzie trwała wiecznieanimation-direction- określa, czy animacja ma być odtwarzana w przód, wstecz czy w naprzemiennych cyklach.
Właściwość kierunek animacji może mieć następujące wartości:normal- Animacja jest odtwarzana normalnie (do przodu). To jest domyślnereverse- Animacja jest odtwarzana w odwrotnym kierunku (do tyłu)alternate- Animacja jest odtwarzana najpierw do przodu, potem do tyłualternate-reverse- Animacja jest odtwarzana najpierw do tyłu, potem do przodu
animation-timing-function- określa krzywą prędkości animacji.
Właściwość animacja-timing-function może mieć następujące wartości:ease- Określa animację z powolnym startem, potem szybkim i powolnym zakończeniem (jest to ustawienie domyślne)linear- Określa animację z tą samą prędkością od początku do końcaease-in- Określa animację z powolnym startemease-out- Określa animację z wolnym końcemease-in-out- Określa animację z powolnym początkiem i końcemcubic-bezier(n,n,n,n)- Pozwala zdefiniować własne wartości w funkcji sześciennej-Beziera Zobacz przykład
animation-fill-mode- określa styl elementu docelowego, gdy animacja nie jest odtwarzana
(przed rozpoczęciem, po zakończeniu lub w obu przypadkach).
Właściwość animation-fill-mode może mieć następujące wartości:none- Wartość domyślna. Animacja nie zastosuje żadnych stylów do elementu przed ani po jego wykonaniuforwards- Element zachowa wartości stylu ustawione przez ostatnią klatkę kluczową (w zależności od kierunku animacji i licznika iteracji animacji)backwards- Element otrzyma wartości stylu ustawione przez pierwszą klatkę kluczową (w zależności od kierunku animacji) i zachowa je podczas okresu opóźnienia animacjiboth- Animacja będzie zgodna z zasadami zarówno do przodu, jak i do tyłu, rozszerzając właściwości animacji w obu kierunkach
animation- właściwość skrócona animacji
zapis:
można zastąpić:div { animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; }div { animation: example 5s linear 2s infinite alternate; }
Poniższy przykład wiąże animację „przyklad” z elementem <div>.
Animacja będzie trwać 4 sekundy i będzie stopniowo zmieniać kolor tła elementu <div> z „czerwonego” na „żółty”:
przykład
Kod animacji
@keyframes przyklad {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: przyklad;
animation-duration: 4s;
}
W powyższym przykładzie określiliśmy, kiedy styl ulegnie zmianie, używając słów kluczowych „od” i „do” (co oznacza 0% (początek) i 100% (zakończenie)).
Możliwe jest również użycie procentów.
Używając procent, możesz dodać dowolną liczbę zmian stylu.
Poniższy przykład zmieni kolor tła elementu <div>, gdy animacja jest ukończona w 25%, w 50% i ponownie,
gdy animacja jest ukończona w 100%:
Przykład
Kod animacji
@keyframes przyklad {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: przyklad;
animation-duration: 4s;
}
Poniższy przykład zmieni zarówno kolor tła, jak i położenie elementu <div>,
gdy animacja jest ukończona w 25%, w 50% i ponownie, gdy animacja jest ukończona w 100%:
Kod animacji
@keyframes przyklad {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: przyklad;
animation-duration: 4s;
}
zadanie
- Otwórz stronę: strona ćwiczeniowa
- utwórz folder animacje
- zaprojektuj stronę według powyższego wzoru:
- menu pojawia się po najechaniu kursorem na "listek" [menu animacji],
- znika gdy kursor będzie poza menu. (bez animacji)
poniżej przykładowe skrypty css "listka" menu
oraz startowej animacji
- dodaj animacje według wzoru animacja1 i "podepnij je" do elementów menu: animacja2 do animacja8
ruch obiektu wzdłuż boków prostokąta
założenia animacji:
szczegółowy opis animacji
pokaz animacji
realizacja animacji:
HTML
<div class="kwadrat"></div>
<div class="kolo kolo1"></div>
<div class="kolo kolo2"></div>
<div class="kolo kolo3"></div>
<div class="kolo kolo4"></div>
<div class="obiekt"></div>
CSS
* {
margin:0;
padding:0;
box-sizing: border-box;
}
body {
background-color: rgb(255, 153, 0);
}
.kwadrat {
position: absolute;
top:100px;
left:100px;
right: 100px;
bottom:100px;
border:5px dotted white;
}
.kolo {
width: 200px;
height: 200px;
position: absolute;
border:4px dotted white;
background-color: rgb(255, 0, 0);
border-radius: 50%;
}
.kolo2, .kolo3 {
right: 0;
}
.kolo3, .kolo4 {
bottom: 0;
}
.obiekt {
width:200px;
height:200px;
background-color: rgb(255, 255, 255);
border:6px double rgb(201, 0, 0);
position:absolute;
top:110px;
left:110px;
animation: ruch 10s linear infinite;
animation-delay: 1s;
}
@keyframes ruch {
0% {
top:110px;
left:110px;
z-index: 0;
border-radius: 0;
background-color: rgb(255, 255, 255);
}
33% {
top:110px;
left:calc(100% - 310px);
z-index: -1;
border-radius: 50%;
background-color: rgb(2, 50, 207);
}
50% {
top:calc(100% - 310px);
left:calc(100% - 310px);
z-index: 0;
border-radius: 0;
background-color: white
}
83% {
top:calc(100% - 310px);
left:110px;
z-index: -1;
border-radius: 50%;
background-color: rgb(6, 77, 0);
}
}
animacja wielu obiektów ping-pong
założenia animacji:
szczegółowy opis animacji
pokaz animacji
realizacja animacji:
HTML
<div class="kwadrat1"></div>
<div class="kwadrat2"></div>
<div class="paletka paletka1"></div>
<div class="paletka paletka2"></div>
<div class="pilka"></div>
CSS
* {
margin:0;
padding:0;
box-sizing: border-box;
}
body {
background-color: green;
}
.kwadrat1 {
position: absolute;
top:100px;
left:100px;
right: calc(50% - 5px);
bottom:100px;
border:10px solid white;
}
.kwadrat2 {
position: absolute;
top:100px;
right:100px;
left: calc(50% - 5px);
bottom:100px;
border:10px solid white;
}
.paletka {
position: absolute;
width:20px;
height:200px;
background-color: aqua;
}
.paletka1 {
left: 120px;
top: calc(50% - 100px);
animation: paletka1 4s linear 1s infinite;
}
.paletka2 {
right: 120px;
top: calc(50% - 100px);
animation: paletka2 4s linear 1s infinite;
}
.pilka {
width:50px;
height:50px;
background-color: rgb(255, 255, 255);
position: absolute;
border-radius: 50%;
top:calc(50% - 25px);
left:140px;
animation: pilka 4s linear 1s infinite;
}
@keyframes paletka1 {
0% {
top: calc(50% - 100px);
}
25% {
top: 120px;
}
75% {
top: calc(100% - 320px);
}
}
@keyframes paletka2 {
0% {
top: calc(50% - 100px);
}
25% {
top: calc(100% - 320px);
}
75% {
top: 120px;
}
}
@keyframes pilka {
0% {
top:calc(50% - 25px);
left:140px;
}
12% {
top: 110px;
left: calc(30%);
}
25% {
top: calc(100% - 220px);
left: calc(100% - 185px);
}
}
animacja złożona
pokaz animacji