Przykład
Złóż elementem stopniowe przejście 200px w dół:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Reguła @keyframes określa kod animacji.
Animacja jest tworzona przez stopniowe przejścia z jednego zestawu stylów CSS do drugiego.
Podczas animacji, można zmienić zestaw stylów CSS wiele razy.
Określ, kiedy zmiana stylu nastąpi w procentach lub za pomocą słów kluczowych "from" i "to" , która jest taka sama jak od 0% do 100%. 0% oznacza początek animacji, 100% oznacza przy animacji jest zakończona.
Wskazówka: Aby uzyskać najlepsze wsparcie przeglądarki, zawsze należy zdefiniować zarówno 0% a 100% selektorów.
Note: Za pomocą właściwości animacji kontrolować wygląd animacji, a także wiązać się z animacji do selektorów.
Pomoc Browser
Liczby w tabeli określa się pierwsza wersja przeglądarki, której w pełni popiera zasadę.
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- |
Składnia CSS
@keyframesanimationname {keyframes-selector {css-styles;}}wartości nieruchomości
| Wartość | Opis |
|---|---|
| animationname | Wymagany. Określa nazwę animacji. |
| keyframes-selector | Wymagany. Procent czasu trwania animacji. Wartości prawne: 0-100% Note: Można mieć wiele klatki kluczowe-selektorów w jednej animacji. |
| css-styles | Wymagany. Jeden lub więcej właściwości stylów CSS prawne |
Więcej przykładów
Przykład
Dodaj wiele klatek kluczowych selektorów w jednej animacji:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Spróbuj sam " Przykład
Zmień wiele stylów CSS w jednym animacji:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Spróbuj sam " Przykład
Wiele klatek kluczowych selektorów z wielu stylów CSS:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Spróbuj sam " Podobne strony
Tutorial CSS3: CSS3 animacje