CSS3 @keyframes zasady
Przykłady
Zrób elementu div stopniowo przesuwa 200 pikseli:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
Spróbuj »
Na dole strony znajduje się więcej przykładów.
Pomoc Browser
| 属性 | |||||
|---|---|---|---|---|---|
| @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- |
definicje i instrukcje Tag
Użyj reguł @keyframes można tworzyć animację.
Tworzenie animacji przez stopniowo zmienia ustawienie z jednym stylu CSS do drugiego.
Podczas animacji, można zmienić czasy ustawiania stylów CSS.
Stosowanie następuje wtedy, gdy określone zmiany w%, lub słowa kluczowego "od" a "do", i to jest od 0% do 100% identyczności.
0% oznacza początek animacji, 100% przy animacji jest zakończona.
Dla optymalnej pomocy przeglądarki, należy zawsze określone jako 0% i 100% selektora.
Uwaga: Za pomocą właściwościanimacji kontrolować wygląd animacji służy również do wyboru powiązania animacji. ,
gramatyka
| wartość | wyjaśnienie |
|---|---|
| animationname | Wymagany. Określ nazwę animacji. |
| keyframes selektor | Wymagany. Czas Procent animacji. Wartość prawna: 0-100% Uwaga: Można użyć animowanej klatki kluczowe-selektorów. |
| CSS-style | Wymagany. Jeden lub więcej uzasadnionych atrybuty stylów CSS |
przykłady Online
Przykłady
Wiele przycisk wyboru ramki, aby dodać film:
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
Spróbuj »
Przykłady
Zmień wiele stylów CSS w jednym animacji:
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
Spróbuj »
Przykłady
Wiele klatek kluczowych selektorów z wielu stylów CSS:
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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 »
Powiązane artykuły
Tutorial CSS3: CSS3 Animacja