CSS3 Animații
animații CSS3 permite animație de cele mai multe elemente HTML fără a utiliza JavaScript sau Flash!
Animaţie
Suport pentru Browser Animatii
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| @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- |
Ce sunt CSS3 Animațiile?
O animație permite un element schimba treptat de la un stil la altul.
Puteți schimba cât mai multe proprietăți CSS pe care doriți, ori de câte ori doriți.
Pentru a utiliza animație CSS3, trebuie să specificați mai întâi câteva keyframes pentru animație.
Cadrele cheie dețin ce stiluri elementul va avea în anumite momente.
@keyframes Regula
Când specificați stiluri CSS în interiorul @keyframes regula, animația se va schimba treptat de stilul actual la noul stil în anumite momente.
Pentru a obține o animație la locul de muncă, trebuie să legați de animație la un element.
Exemplul următor leagă "example" animație la <div> element. Va fi rulată animația durează timp de 4 secunde, si se va schimba treptat culoarea de fundal a <div> elementul de la "red" la "yellow" :
Exemplu
/* 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;
}
Încearcă - l singur » Note: În cazul în care animation-duration proprietate nu este specificată, animația va avea nici un efect, deoarece valoarea implicită este 0.
In exemplul de mai sus , am specificat în cazul în care stilul se va schimba folosind cuvintele cheie "from" de "to" (which represents 0% (start) (complete) "from" și "to" (which represents 0% (start) și 100% (complete) ).
De asemenea, este posibil să se utilizeze la sută. Prin utilizarea la sută, puteți adăuga cât mai multe schimbări de stil doriți.
Următorul exemplu va schimba fundal culoarea <div> Elementul când animația este de 25% complet, 50% completă, și din nou când animația este 100% complet:
Exemplu
/* 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;
} Încearcă - l singur » Următorul exemplu se va modifica atât fundal culoarea și poziția <div> Elementul când animația este de 25% complet, 50% completă, și din nou când animația este 100% complet:
Exemplu
/* 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;
} Încearcă - l singur » Amânați o animație
animation-delay proprietate specifică o întârziere pentru începerea unei animații.
Următorul exemplu are o întârziere de 2 secunde înainte de a porni animația:
Exemplu
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Încearcă - l singur » Set de câte ori o animație ar trebui să ruleze
animation-iteration-count proprietate specifică numărul de ori o animație ar trebui să fie difuzate.
Următorul exemplu va rula animația de 3 ori înainte de a se oprește:
Exemplu
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Încearcă - l singur » Exemplul următor utilizează valoarea „ infinite “ pentru a face animație continua pentru totdeauna:
Exemplu
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Încearcă - l singur » Run Animation în direcție inversă sau Cicluri alternative
animation-direction proprietate este folosită pentru a lăsa o rula animație în sens invers sau cicluri alternative.
Următorul exemplu va rula animația în sens invers:
Exemplu
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Încearcă - l singur » Exemplul următor utilizează valoarea "alternate" pentru a face animație a alerga mai întâi înainte, apoi înapoi, apoi înainte:
Exemplu
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Încearcă - l singur » Specifică curba viteza animației
animation-timing-function de proprietate specifică curba viteza animației.
Proprietatea de animație-sincronizare-funcție poate avea următoarele valori:
-
ease- specifică o animație cu un început lent, apoi rapid, apoi se termina lent (this is default) -
linear- specifică o animație cu aceeași viteză de la început până la sfârșit -
ease-in- specifică o animație cu un început lent -
ease-out- specifică o animație cu un capăt lent -
ease-in-out- specifică o animație cu un început lent și sfârșit -
cubic- bezier(n,n,n,n)- vă permite să definiți propriile valori într - o funcție cubi Bezier
Exemplul următor prezintă unele dintre diferitele curbe de viteză care pot fi utilizate:
Exemplu
#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;} Încearcă - l singur » Animație stenografie Proprietate
Exemplul de mai jos folosește șase dintre proprietăți de animație:
Exemplu
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Încearcă - l singur » Același efect de animație ca mai sus se poate realiza prin utilizarea stenografie animation proprietate:
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»
Proprietăți Animație CSS3
Tabelul următor listează @keyframes regula și toate proprietățile de animație:
| Proprietate | Descriere |
|---|---|
| @keyframes | Specifică codul de animație |
| animation | O proprietate prescurtare pentru stabilirea tuturor proprietăților de animație |
| animation-delay | Specifică o întârziere pentru începerea unei animații |
| animation-direction | Specifică dacă o animație ar trebui să joace în sens invers sau cicluri alternative |
| animation-duration | Specifică cât de multe secunde sau milisecunde ia o animație pentru a finaliza un ciclu |
| animation-fill-mode | Specifică un stil pentru elementul atunci când animația nu se joacă (when it is finished, or when it has a delay) |
| animation-iteration-count | Specifică numărul de ori o animație ar trebui să fie jucate |
| animation-name | Specifică numele animației @keyframes |
| animation-play-state | Specifică dacă animația se execută sau întrerupte |
| animation-timing-function | Specifică curba de viteză de animație |