Cum se anime cu CSS

Publicat: 2014-12-27

Ne-am obișnuit destul de mult să vedem animații pe site-uri web și să ne bucurăm de energia și varietatea pe care le aduc în designul web. Sunt atrăgătoare, o modalitate excelentă de a adăuga un oarecare interes vizual unui site și, în general, de a face experiența mai interesantă pentru utilizatorii dvs.

Deși se realizează în mod tradițional cu GIF-uri, SVG, WebGL și videoclipuri de fundal, animațiile pot fi create eficient și cu CSS. Suportul de browser pentru animațiile CSS s-a îmbunătățit foarte mult și devine destul de popular - browserele compatibile includ Firefox 5+, IE 10+, Chrome, Safari 4+ și Opera 12+.

Astăzi vă voi prezenta elementele de bază ale creării unei animații CSS cu o demonstrație pas cu pas. Rămâi după aceea și vezi cinci exemple de animații. Veți putea folosi toate aceste idei pentru a crea animații pentru propriile proiecte!

Elementele de bază ale animației CSS

Evident, este important să acoperim elementele de bază ale modului în care funcționează animațiile înainte de a ne scufunda în cele cinci animații CSS distractive.
De exemplu, cadrele cheie sunt o componentă cheie a animațiilor CSS. Este posibil să fiți familiarizat cu acest termen dacă ați lucrat cu Adobe Flash sau aveți experiență în editarea video. În acest caz, termenul cadru cheie este exact ceea ce ați crede: este o modalitate de a specifica o anumită acțiune.

Este posibil să fi întâlnit @keyframes într-o foaie de stil CSS. În cadrul acestui @keyframes este locul în care definiți stilurile și etapele pentru animație. Iată un exemplu grozav de efect de estompare:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Elementele de bază ale cadrului cheie fadeout pe care tocmai l-am creat includ:

Un nume descriptiv: în acest caz, fadeOut.
Etapele animației: De la a fost setat la 0% și To a fost setat la 100%.
Stiluri CSS care vor fi aplicate în fiecare etapă.

În mod implicit, De la va fi la 0% și To va fi la 100%, deoarece în acest exemplu nu sunt specificate alte etape.

Acțiuni specifice cu subproprietăți de animație

Trebuie să facem puțin mai mult pentru a stila lucrurile — trebuie să stilăm proprietatea animation cu subproprietăți. Dacă cadrele cheie definesc cum va arăta animația, atunci sub-proprietățile animației definesc reguli specifice pentru animație. Acestea vă permit să configurați sincronizarea, durata și alte detalii cheie ale modului în care ar trebui să progreseze secvența de animație.

Proprietatea animație este folosită pentru a apela @keyframes în interiorul unui selector CSS. Animațiile pot și vor avea adesea mai multe subproprietăți. Iată exemple de subproprietăți:

Parteneriat cu un artist de grafică în mișcare

Nimic nu poate aduce design-urile tale la viață ca animația. Dar dacă nu ai lucrat niciodată cu un animator sau cu un artist de grafică în mișcare, mișcarea se poate simți ca o lume străină. Daca te gandesti la p...

Animation-name: numele @keyframes at-rule, care descrie cadrele cheie ale animației. Numele fadeOut din exemplul anterior este un exemplu de animation-name.
Durata animației: perioada de timp pe care o animație ar trebui să o ia pentru a finaliza un ciclu complet.
Animation-timing-function: sincronizarea animației, în special modul în care animația trece prin cadrele cheie. Această funcție are capacitatea de a stabili curbele de accelerație. Exemplele sunt liniar, ease, ease-in, ease-out, ease-in-out sau cubic-bezier .
Animation-delay: întârziere între momentul în care elementul este încărcat și începutul animației.
Animation-iteration-count: de câte ori ar trebui să se repete animația. Vrei ca animația să continue pentru totdeauna? Puteți specifica infinit pentru a repeta animația la nesfârșit.
Animație-direcție: dacă animația ar trebui sau nu să alterneze direcția la fiecare rulare prin secvență sau să se reseteze la punctul de pornire și să se repete.
Animation-fill-mode: valori care sunt aplicate de animație atât înainte, cât și după ce a fost executată.
Animație-play-state: cu această opțiune, puteți întrerupe și relua secvența de animație. Exemplele sunt niciunul, înainte, înapoi sau ambele .

Pune totul împreună pentru cel mai bun suport pentru browser

Se întâmplă multe aici, iar terminologia poate fi puțin confuză. Dar acum știm că cadrele cheie definesc cum va arăta animația, precum și diferitele etape ale animației și că proprietatea animației folosește subproprietăți pentru a defini opțiunile de animație precum întârziere, direcție, sincronizare și așa mai departe.

Probabil că sunteți familiarizat cu prefixele furnizorului sau ale browserului - acestea sunt necesare atunci când lucrați cu animații. Trebuie să ne asigurăm că avem cel mai bun suport pentru browser. Iată prefixele standard ale browserului:

Chrome și Safari: -webkit-
Firefox: -moz-
Internet Explorer: -ms-

Internet Explorer 10 nu necesită un prefix pentru tranziții, dar toate transformările necesită prefixul. Opera este acoperită deoarece recunoaște stilurile WebKit.

Începe tranziția

-webkit-transition
-moz-transition
transition

Pornirea transformării:

-webkit-transform
-moz-transform
-ms-transform
transform

Vrei să încerci un alt tip de animație? Faceți un gif în Photoshop! Iată cum.

Cinci animații în acțiune

Acum că am acoperit elementele de bază, să creăm un cod de folosit!

Animație 1: cerc în pătrat
animație-unu

Să trecem în detaliu la primul, astfel încât să ne asigurăm că înțelegem toate conceptele pe care le-am acoperit până acum. Animația va începe ca un cerc și se va transforma într-un pătrat.

Crearea unui div pentru a începe este o modalitate excelentă de a testa animația:

&amp;lt;div class=”animationOne”&amp;gt;
&amp;lt;/div&amp;gt;

Acum să ne @keyframes . Această animație va avea cinci etape, deoarece un pătrat are patru laturi și trebuie să avem un punct de plecare de 0%. Utilizați prefixe, așa cum se arată mai jos, dar pentru restul tutorialului îl vom menține simplu, cu doar elementele de bază.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Acum, să creăm câteva stiluri pentru a determina care va apărea a fi raza graniței în fiecare etapă:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Acum adăugați proprietatea background-color pentru a ajuta la diferențierea fiecărei etape a animației:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

În cele din urmă, să aplicăm animația div-ului de testare:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

Proprietatea de animație este de obicei scrisă cu prescurtare, așa că iată ce se întâmplă de fapt în cod:

Numele animației este circle-to-square .
Durata animației este de 2s .
Întârzierea animației este de 1s .
Numărul de iterații-animație este infinite , așa că va continua pe o perioadă nedeterminată.
Și direcția de animație este alternate . Aceasta înseamnă că va juca de la început până la sfârșit și se va întoarce la început.

Animație a doua: rotație
animație-doi

Această animație permite rotirea unui obiect.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Pentru a menține proiectele noastre de animație separate, nu uitați să creați un alt div pentru acest al doilea exemplu. Am adăugat o culoare de fundal pentru că vom adăuga animația la div-ul în sine pentru acest exemplu.

Durata acestei animații este de două secunde, cu o întârziere de trei secunde. Numărul de iterații de animație este de cinci, așa că acest proiect se va anima de cinci ori înainte de a se opri. Animația este redată invers de fiecare dată impar (1,3,5,... ) și într-o direcție normală de fiecare dată par (2,4,6,... ).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animația trei: extinde și pâlpâie
animație-trei

Aceasta este o animație grozavă pentru un buton, deoarece este mai atrăgătoare și mai proeminentă în comparație cu alte elemente de pe pagină. Acest lucru ar putea fi, de asemenea, ceva util de inclus într-o stare :hover .

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Pentru a utiliza acest test, avem nevoie de următorul div de pornire:

.animationThree {
width: 200px;
height: 200px;
}

&amp;lt;div class=”animationThree&amp;gt;
&amp;lt;a class=&quot;btn pulse&quot; href=&quot;&quot;&amp;gt;Click me&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;

Animație patru: diapozitiv text
Să adăugăm ceva animație textului. Acest proiect face textul să alunece o dată din stânga.
animație-patru

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Animație cinci: fade in
animație-cinci

Ai ceva conținut surpriză? Verificați această animație cu fade in pentru conținutul pe care doriți să apară mai târziu. Aveți o mulțime de opțiuni aici: Fade in poate fi rapidă sau lentă, poate avea loc o dată sau de mai multe ori și așa mai departe.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

&amp;lt;div class=”animationFive”&amp;gt;
&amp;lt;img src=&quot;..&quot; /&amp;gt;
&amp;lt;/div&amp;gt;

Animațiile CSS3 sunt fantastice pentru ca site-ul dvs. să se miște și să se transforme! Acum că aveți conceptele de bază pentru a crea animații, posibilitățile de animație sunt nesfârșite. Ce vei anima?