animacje CSS3

CSS3, możemy tworzyć animacje, które mogą zastąpić wiele stron animowanych obrazów, animacji Flash i JavaScript.

CSS3
ożywienie

CSS3 @keyframes zasady

Aby utworzyć animacje CSS3, będziesz musiał nauczyć się zasad @keyframes.

@keyframes regułą jest tworzenie animacji. Określ styl CSS i animacja będzie stopniowo przejść do nowego stylu z bieżącego stylu w obrębie zasad @keyframes.

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.

Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.

属性
@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-

Przykłady

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

animacje CSS3

Podczas tworzenia @keyframes animacji, powiązać go z selektora, inaczej animacja będzie miał żadnego wpływu.

Podaj co najmniej dwie właściwości animacji CSS3 jest związany z selektora:

To określa nazwę animacji
Gdy określona długość animacji

Przykłady

W "myfirst" animacja przywiązany do elementu div Czas trwania: 5 sekund:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Spróbuj »

Uwaga: Należy określić czas trwania nazwą animacji i animacji.Jeśli pominąć czas trwania animacji nie będzie działać, ponieważ wartość domyślna to 0.

Jakie są animacje CSS3?

Animacja jest elementem dokonać stopniowego przechodzenia z jednego stylu na inny efekt stylu.

Można zmienić tak wiele stylów, jak wiele razy.

Proszę kliknąć na procentową zmianę w wyznaczonym terminie lub słowa kluczowego "z" i "do", co odpowiada 0% do 100%.

0% to początek animacji, animacja jest w 100% kompletne.

Dla najlepszego wsparcia przeglądarki, zawsze należy zdefiniować 0% i 100% selektora.

Przykłady

Zmiana koloru tła, gdy animacja jest 25% i 50% i 100% ukończone, gdy animacja znowu się zmienił:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Spróbuj »

Przykłady

Zmienić kolor tła i miejsce:

@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Spróbuj »

Właściwości animacji CSS3

W poniższej tabeli przedstawiono zasady @keyframes i wszystkie właściwości animacji:

nieruchomość	opis	CSS
@keyframes	Przepisy animacja.	3
ożywienie	Skrócona forma dla wszystkich właściwości animacji, oprócz właściwości animacji play-państwowej.	3
animacja-name	Określa animację nazwa @keyframes.	3
animacja-czas	Przepisy animacja trwa do ukończenia cyklu sekund lub milisekund. Wartość domyślna to 0.	3
animacja-timing-function	Określona szybkość krzywej animacji. Domyślną wartością jest "łatwość".	3
animacja opóźnienia	Gdy określona animacja zaczyna. Wartość domyślna to 0.	3
animacja-iteracja-count	Określoną liczbę razy animacja jest odtwarzana. Wartość domyślna to 1.	3
animacja-kierunek	Niezależnie od postanowień animacji grać w odwrotnej kolejności do następnego cyklu. Domyślnie jest to "normalne".	3
animacja-play-state	Niezależnie od postanowień animacji jest uruchomiony lub wstrzymany. Domyślną wartością jest "systemem".	3

Poniższe dwa przykłady ustawić wszystkie właściwości animacji:

Przykłady

Uruchom myfirst animacji, ustawić wszystkie atrybuty:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Spróbuj »