1. Home
  2. CSS Animacja

Najlepszy samouczek CSS Animacja W 2024 r. W tym samouczku możesz dowiedzieć się Definicja i Wykorzystanie,Pomoc Browser,Przykłady,właściwości Animacja,

CSS Animacja

Definicja i Wykorzystanie

Niektóre właściwości CSS mogą być animowane, co oznacza, że mogą one być wykorzystywane do animacji i przejść.

Właściwości animacji można stopniowo zmienił się z jednej do innej wartości, na przykład wielkość, liczba i odsetek koloru.

Pomoc Browser

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

Natychmiast po numerze -webkit-, -moz- lub -o- określa pierwszą przeglądarką, która obsługuje tej wersji atrybutem prefiks.

4,0 -webkit- 10,0 16,0
5,0 -moz- 		4,0 -webkit- 15,0 -webkit-
12,1
12,0 -o-

Przykłady

Kolor tła stopniowo zmienia kolor z czerwonego na niebieski:

@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}

Spróbuj »

właściwości Animacja

Właściwości animacji CSS:

nieruchomość Przykłady
tło Spróbuj "
background-color Spróbuj "
background-position Spróbuj "
background-size Spróbuj "
granica Spróbuj "
border-bottom Spróbuj "
border-bottom-color Spróbuj "
border-bottom-left-radius Spróbuj "
border-bottom-right-radius Spróbuj "
border-bottom-width Spróbuj "
border-color Spróbuj "
border-left Spróbuj "
border-left-color Spróbuj "
border-left-width Spróbuj "
border-right Spróbuj "
border-right-color Spróbuj "
border-right-width Spróbuj "
border-spacing Spróbuj "
border-top Spróbuj "
border-top-color Spróbuj "
border-top-left-radius Spróbuj "
border-top-right-radius Spróbuj "
border-top-width Spróbuj "
dolny Spróbuj "
box-shadow Spróbuj "
klips Spróbuj "
kolor Spróbuj "
column-count Spróbuj "
column-gap Spróbuj "
column-rule Spróbuj "
column-rule-color Spróbuj "
column-rule-width Spróbuj "
Szerokość kolumny Spróbuj "
kolumny Spróbuj "
filtr Spróbuj "
Flex
Flex-podstawy Spróbuj "
Flex-rosną Spróbuj "
Flex-skurczyć Spróbuj "
chrzcielnica Spróbuj "
font-size Spróbuj "
font-size-adjust
font-odcinek
font-weight Spróbuj "
wysokość Spróbuj "
lewo Spróbuj "
letter-spacing Spróbuj "
line-height Spróbuj "
margines Spróbuj "
margin-bottom Spróbuj "
margin-left Spróbuj "
margin-right Spróbuj "
margin-top Spróbuj "
max-height Spróbuj "
max-width Spróbuj "
min-height Spróbuj "
min-width Spróbuj "
nieprzezroczystość Spróbuj "
zamówienie Spróbuj "
zarys Spróbuj "
outline-color Spróbuj "
zarys offsetu Spróbuj "
Zarys szerokości Spróbuj "
wyściółka Spróbuj "
padding-bottom Spróbuj "
padding-left Spróbuj "
padding-tuż Spróbuj "
padding-top Spróbuj "
perspektywa Spróbuj "
Perspektywa-origin Spróbuj "
prawo Spróbuj "
text-decoration-color Spróbuj "
text-indent Spróbuj "
text-shadow Spróbuj "
top Spróbuj "
przekształcać Spróbuj "
przekształcić-origin Spróbuj "
vertical-align Spróbuj "
widoczność
szerokość Spróbuj "
word-spacing Spróbuj "
z-index Spróbuj "

Hot Tutorials

Contact US

CSS Animacja
10/30