Animacje CSS3
CSS3 animacje umożliwia animację większości elementów HTML bez używania JavaScript lub Flash!
Animacja
Pomoc przeglądarki dla animacji
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Jakie są CSS3 animacje?
Animacja pozwala elementem stopniowo zmieniać od jednego stylu do drugiego.
Można zmienić tak wiele właściwości CSS chcesz, tak wiele razy chcesz.
Aby korzystać z animacji CSS3, należy najpierw podać kilka klatek kluczowych dla animacji.
Klatki kluczowe przytrzymaj jakie style element będzie mieć w pewnych okresach.
@keyframes Reguła
Podczas określania stylów CSS wewnątrz @keyframes zasadę, że animacja będzie się stopniowo zmieniać od bieżącego stylu do nowego stylu w określonych porach.
Aby uzyskać animację do pracy, trzeba wiązać animację do elementu.
Poniższy przykład wiąże "przykład" animacja do <div> elementu. Animacja wola trwa 4 sekundy, a to stopniowo zmieniać tła-kolor <div> elementu z "czerwonego" do "żółty":
Przykład
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Spróbuj sam " Uwaga: Jeśli animation-duration właściwość nie zostanie określona, animacja będzie miała żadnego wpływu, ponieważ wartość domyślna to 0.
W powyższym przykładzie mamy określone, gdy zmieni styl za pomocą słów kluczowych "from" i "to" (co stanowi 0% (start) i 100% (pełna)).
Jest również możliwe stosowanie proc. Używając procent, można dodać dowolną liczbę zmian w stylu, jak chcesz.
Poniższy przykład spowoduje zmianę tła-kolor <div> elementu, gdy animacja jest 25% kompletne, 50% kompletne i ponownie, gdy animacja jest w 100% kompletna:
Przykład
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Spróbuj sam " Poniższy przykład zmienia zarówno background-color oraz pozycję <div> elementu, gdy animacja jest 25% kompletne, 50% kompletne i ponownie, gdy animacja jest w 100% kompletna:
Przykład
/* The animation code */
@keyframes example
{
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;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Spróbuj sam " Opóźnić animację
animation-delay właściwość określa opóźnienie dla początku animacji.
Poniższy przykład ma 2 sekundy opóźnienia przed rozpoczęciem animacji:
Przykład
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Spróbuj sam " Ustaw ile razy animacja powinna być
animation-iteration-count właściwość określa liczbę razy animacja powinna uruchomić.
Poniższy przykład uruchomić animację 3 razy, zanim się zatrzyma:
Przykład
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Spróbuj sam " Poniższy przykład wykorzystuje wartość " infinite ", aby animacja kontynuować przez wieki
Przykład
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Spróbuj sam " Uruchom animację w odwrotnym kierunku lub zastępca Cycles
animation-direction właściwość służy do niech się uruchomić animację w odwrotnym kierunku lub naprzemiennych cyklach.
Poniższy przykład uruchomić animację w odwrotnym kierunku:
Przykład
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Spróbuj sam " Poniższy przykład wykorzystuje wartość "alternate" aby najpierw uruchomić animację do przodu, potem do tyłu i do przodu:
Przykład
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Spróbuj sam " Określanie krzywej prędkości animacji
animation-timing-function właściwość określa krzywą animacji prędkości.
Nieruchomość animacja-timing-function może mieć następujące wartości:
-
ease- określa animację z powolnym początku, a potem szybko, po czym powoli kończy (jest to ustawienie domyślne) -
linear- określa animację z tą samą prędkością, od początku do końca -
ease-in- określa animację z powolnym starcie -
ease-out- określa animację z powolnym końca -
ease-in-out- określa animację z powolnym początkiem i końcem -
cubic-bezier(n,n,n,n)- pozwala zdefiniować własne wartości w funkcji sześcienny-Beziera
Poniższy przykład pokazuje, że niektóre z różnych krzywych prędkości, które mogą być stosowane:
Przykład
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} Spróbuj sam " Animacja Shorthand nieruchomości
Poniższy przykład wykorzystuje sześć właściwości animacji:
Przykład
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Spróbuj sam " Ten sam efekt animacji jak wyżej można osiągnąć przy użyciu skróconej animation właściwość:
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6»
Właściwości CSS3 Animacja
Poniższa tabela przedstawia @keyframes regułę i wszystkie właściwości animacji:
| Nieruchomość | Opis |
|---|---|
| @keyframes | Określa kod animacji |
| animation | Skrót nieruchomości na ustawienie wszystkich właściwości animacji |
| animation-delay | Określa opóźnienie rozpoczęcia animacji |
| animation-direction | Określa, czy animacja powinna odgrywać w odwrotnym kierunku lub naprzemiennych cyklach |
| animation-duration | Określa ile sekund lub milisekund animacja trwa do zakończenia jednego cyklu |
| animation-fill-mode | Określa styl dla elementu, gdy animacja nie jest odtwarzana (gdy zostanie zakończone, lub gdy ma opóźnienie) |
| animation-iteration-count | Określa, ile razy animacja powinna być odtwarzana |
| animation-name | Określa nazwę animacji @keyframes |
| animation-play-state | Określa, czy animacja jest uruchomiony lub wstrzymany |
| animation-timing-function | Określa krzywą prędkości animacji |