Tranzițiile sunt o formă de bază de animație CSS pe care o puteți folosi pentru a crea efecte frumoase.

Recomandări cheie

  • Tranzițiile CSS modifică fără probleme valorile proprietăților, adăugând feedback și atracție vizuală elementelor web și îmbunătățind experiența utilizatorului.
  • Proprietățile de tranziție precum proprietatea tranziției, durata tranziției, funcția de sincronizare a tranziției și întârzierea tranziției sunt cheie în controlul comportamentului și sincronizarea tranzițiilor.
  • Începătorii ar trebui să înceapă cu tranziții simple, să înțeleagă modelul casetei, să planifice tranzițiile în prealabil, optimizați pentru performanță, luați în considerare accesibilitatea și folosiți instrumentele pentru dezvoltatori Chrome pentru a fi fără probleme dezvoltare.

Crearea de site-uri web excepționale necesită un echilibru între o interfață atrăgătoare și interacțiuni captivante. Aceste interacțiuni joacă un rol major în modelarea experienței utilizatorului. În calitate de dezvoltator, te vei baza adesea pe diverse metode pentru a realiza acest lucru. Printre acestea, tranzițiile CSS se remarcă ca fiind una dintre cele mai ușoare modalități de a crea interacțiuni simple pe o pagină web.

instagram viewer

Veți avea nevoie de o înțelegere a tranzițiilor CSS, proprietăților, bunelor practici și multe altele înainte de a începe să creați site-uri web interactive fără întreruperi.

Înțelegerea tranzițiilor CSS

O tranziție CSS schimbă fără probleme valoarea unei proprietăți, de la o stare inițială la una finală, pe o durată specificată. Astfel de tranziții adaugă feedback și atracție vizuală elementelor web și pot îmbunătăți experiența utilizatorului. Tranzițiile sunt una dintre multele funcții pe care le puteți utiliza pentru a face un site web receptiv.

O tranziție are loc ca răspuns la un eveniment de declanșare, cum ar fi trecerea cursorului peste un buton. De exemplu, când treceți cu mouse-ul peste un buton, o tranziție CSS își poate schimba culoarea de fundal de la o stare (inițială) la alta (finală). Această tranziție are loc pe durata pe care o specificați, creând un efect atrăgător din punct de vedere vizual.

Proprietăți de tranziție

Indiferent de efectul pe care încercați să îl creați, trebuie să înțelegeți proprietățile de tranziție care sunt disponibile. Puteți să le utilizați pentru a ajusta comportamentul tranzițiilor dvs.

tranziție-proprietate

Această proprietate determină care proprietate (sau proprietăți) CSS va suferi efectul de tranziție. Puteți enumera mai multe proprietăți, separate prin virgule, pentru a trece simultan. Includeți un nume de proprietate specific pentru a determina modificarea numai a acelei proprietăți în timpul tranziției. Sau folosiți cuvântul cheie toate pentru a face tranziția tuturor proprietăților CSS care acceptă tranziția.

Iată sintaxa:

transition-property: property1, property2, ...;

durata tranziției

Această proprietate stabilește durata efectului de tranziție, specificând cât timp ar trebui să dureze animația. Specificați valoarea folosind secunde (s) sau milisecunde (ms), cum ar fi 0,5s sau 300 ms. Aceasta este sintaxa:

transition-duration: time;

tranziție-funcție-temporizare

Această proprietate controlează sincronizarea tranziției, definind accelerația și decelerația animației. Îl puteți folosi în stilul elementelor pentru a crea diferite efecte de relaxare. Iată câteva valori/funcții de sincronizare de încercat:

  • uşura: Pornire lent, apoi rapid, apoi sfârșit lent (implicit).
  • liniar: Viteza constanta.
  • ușurință: Pornire lent.
  • uşurare: Sfarsit lent.
  • ușurință-in-out: Început și sfârșit lent.

Iată sintaxa:

transition-timing-function: timing-function;

tranziție-întârziere

Această proprietate introduce o întârziere înainte de începerea tranziției. Puteți specifica valoarea în secunde (s) sau milisecunde (ms). Sintaxa este:

transition-delay: time;

Aceste proprietăți controlează în mod colectiv modul în care se comportă tranziția, inclusiv care proprietăți se animă și exact modul în care se comportă sincronizarea animației.

Începeți cu tranziții simple

Înțelegerea proprietăților de tranziție CSS este un lucru, dar cum funcționează ele în practică? Iată câțiva pași de urmat ori de câte ori doriți să stilați un element folosind tranziții.

1. Selectați elementul dvs. HTML

Alegeți elementul HTML căruia doriți să aplicați o tranziție. Acesta poate fi un buton, link, imagine sau orice alt element la care doriți să adăugați un efect interactiv.

html>
<html>
<head>
<style>
 /* CSS goes here */
style>
head>
<body>

<buttonclass="transition-button">Hover Mebutton>
body>
html>

Acest marcaj vă va oferi un buton de bază, implicit, pentru a începe să lucrați cu:

2. Identificați proprietatea de tranziție și definiți starea inițială

Determinați ce proprietate CSS a elementului selectat doriți să animați și setați stilul inițial al elementului folosind CSS. Această stare reprezintă modul în care apare elementul atunci când utilizatorii nu interacționează cu el.

<style>
/* Identify the property (background-color) */
.transition-button {
 /* Define the initial state */
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
style>

Butonul dvs. va avea acum câteva stiluri cu care puteți practica tranziția:

3. Specificați starea Hover

Creați o regulă CSS care se aplică atunci când treceți cursorul peste element. În cadrul acestei reguli, modificați proprietatea CSS pe care ați identificat-o în al doilea pas în starea sa finală.

<style>
/* Specify the hover state */
.transition-button: hover {
 background-color: red;
}
style>

4. Aplicați proprietăți de tranziție

Folosește tranziție-proprietate, durata tranziției, și tranziție-funcție-temporizare proprietăți pentru a specifica detaliile tranziției.

<style>
.transition-button {
 /* Specify transition properties */
 transition-property: background-color;
 transition-duration: 0.5s;
 transition-timing-function: ease;
}
style>

Acest exemplu demonstrează cum să creați un buton simplu cu o tranziție de culoare de fundal care rulează atunci când cursorul trece peste el. Culoarea de fundal trece ușor de la albastru la roșu în 0,5 secunde, cu un efect de relaxare. Puteți vedea efectul complet asupra acestui lucru GitHub demonstrație.

Utilizați acești pași ca bază pentru a explora tranziții și animații mai complexe în proiectele dvs. de dezvoltare web. Încercați câteva proiecte unde puteți personalizați casetele de selectare și butoanele radio, învață să creezi un acordeon simplu, și altele.

Cele mai bune practici și sfaturi pentru începători

Iată câteva bune practici și sfaturi pentru a vă ajuta să începeți să lucrați cu tranzițiile CSS.

  • Începeți cu tranziții simple. Dacă sunteți nou în tranzițiile CSS, începeți cu animații simple, cum ar fi modificări de culoare sau ajustări de opacitate. Vă va ajuta să înțelegeți elementele de bază înainte de a aborda tranzițiile mai complexe.
  • Înțelegeți modelul cutiei. Familiarizați-vă cu modelul casetei CSS, care include proprietăți precum lățimea, înălțimea, umplutura și marginea. Înțelegerea modului în care funcționează aceste proprietăți este crucială atunci când animați elemente.
  • Planificați-vă tranzițiile. Înainte de a implementa tranzițiile, planificați ceea ce doriți să realizați. Schițați stările de tranziție, momentul și efectele pe hârtie sau digital pentru a evita încercările și erorile inutile.
  • Optimizați pentru performanță. Fiți atenți la performanță atunci când utilizați tranzițiile. Evitați suprautilizarea tranzițiilor complexe, în special pe dispozitivele mobile, deoarece acestea influențează timpul de încărcare și experiența utilizatorului.
  • Luați în considerare accesibilitatea. Asigurați-vă că tranzițiile dvs. sunt accesibile tuturor utilizatorilor. Oferiți modalități alternative de acces la conținut sau funcții care se bazează pe tranziții, în special pentru cei cu dizabilități.
  • Utilizați instrumentele pentru dezvoltatori Chrome. Profitați la maximum de instrumentele pentru dezvoltatori Chrome pentru o dezvoltare fără întreruperi a tranziției. Utilizați DevTools pentru a inspecta și modifica proprietățile de tranziție în timp real și experimentați cu diverse funcții de sincronizare.

Urmând aceste bune practici și sfaturi, puteți construi o bază solidă în lucrul cu tranzițiile CSS și vă puteți dezvolta treptat abilitățile de a crea experiențe web captivante și interactive.

Compatibilitate între browsere

Compatibilitatea între browsere este o considerație crucială atunci când lucrați cu tranzițiile CSS pentru a vă asigura că animațiile și interacțiunile dvs. funcționează în mod constant în diferite browsere web. Iată câteva dintre cele mai bune practici și sfaturi pentru a obține compatibilitatea între browsere cu tranzițiile CSS:

  • Utilizați prefixe pentru proprietățile specifice furnizorului. Diferitele browsere pot necesita prefixe de furnizor pentru anumite proprietăți CSS. De exemplu, ar putea fi necesar să utilizați -webkit- pentru Safari și Chrome, -moz- pentru Firefox și -o- pentru Opera. Includeți întotdeauna aceste prefixe atunci când este necesar pentru a acoperi o gamă largă de browsere.
  • Testați pe mai multe browsere. Testați-vă în mod regulat tranzițiile pe diferite browsere, inclusiv Chrome, Firefox, Safari, Edge și Opera. Utilizați instrumentele pentru dezvoltatori de browser pentru a identifica și remedia problemele.
  • Includeți stiluri de rezervă pentru proprietățile care se anime cu tranziții. În cazul în care tranzițiile nu sunt acceptate, se vor aplica aceste stiluri.

Respectarea acestor practici vă permite să creați tranziții CSS care funcționează fără probleme și în mod consecvent în diferite browsere.

Continuați să exersați cu tranzițiile CSS

Fiți la curent cu cele mai recente tendințe de dezvoltare web și cele mai bune practici în tranzițiile CSS. Simțiți-vă liber să experimentați cu diferite proprietăți și valori de tranziție pentru a obține efecte unice. Învățarea implică adesea încercări și erori, așa că repetați și ajustați tranzițiile în timp.