Ce sunt tranzițiile CSS și cum să le folosești

Publicat: 2022-02-16

Într-un articol anterior, ați învățat conceptele de bază ale animațiilor CSS și cum să le utilizați. Am putea spune că tranzițiile sunt o formă simplificată de animație cu unele diferențe între ele, forma de declanșare a animației fiind cea mai relevantă.

O altă diferență este că tranzițiile au doar două stări (starea inițială și finală), în timp ce puteți defini mai multe stări pentru un element animat cu regula @keyframes . Tranzițiile sunt declanșate la o acțiune, de exemplu atunci când treceți cu mouse-ul peste un element, dar animațiile pot apărea fără o acțiune specifică, de exemplu cu o întârziere a animației după încărcarea paginii.

În acest tutorial, vom învăța conceptele de bază ale tranzițiilor CSS cu un exemplu practic. În plus, veți învăța și cum să utilizați un sprite imagine cu CSS.

Să începem!

Pasul 1. - Aspectul propus

Tranziții CSS și cum să le folosești

Avem 4 carduri care promovează serviciile obișnuite ale unei agenții web. Când treceți cu mouse-ul peste ele, fiecare dintre elementele din interiorul cardului va avea o tranziție diferită pentru a obține efectul dorit.

Pasul # 2. - HTML

  • Deschideți editorul de cod preferat
  • Creați un fișier HTML numit index.html
  • Copiați și lipiți acest cod:
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
DESCHIS ÎN POPUP
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 tranziții css 001

Containerul-card-serviciu are 4 carduri diferite. Fiecare card este compus dintr-o pictogramă, un titlu, ceva text și un link către informațiile corespunzătoare de pe site. Textul și linkul vor fi afișate când treceți cu mouse-ul peste card, în caz contrar, vor fi ascunse.

Pasul 3. - Stilurile CSS de bază

  • Creați un fișier CSS și numiți-l style.css — în codul HTML există deja un link către acest fișier și către Fonturi Google
  • Copiați și inserați aceste stiluri pentru a schimba stilurile de tipografie și culoarea de fundal a cardurilor:
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
DESCHIS ÎN POPUP
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 tranziții css 002

Pasul #4. - Stilurile de aspect

Să folosim CSS Grid pentru a crea cărțile și a le aranja pe orizontală.

  • Editați codul CSS:
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Containerul cardului de service este o grilă orizontală cu 4 coloane. Fiecare card a fost declarat și ca un container grilă cu 2 rânduri. Observați că am declarat o înălțime fixă ​​pentru fiecare card.

191125 tranziții css 003

Pasul #5. - The Image Sprite

Potrivit W3Schools, un sprite de imagine este o colecție de imagini puse într-o singură imagine. Economisiți lățime de bandă, deoarece pagina nu va trebui să facă o cerere de server pentru fiecare imagine pe care trebuie să o încarce. Acesta va solicita imaginea o dată, apoi veți mapa partea necesară a imaginii în codul CSS.

191125 tranziții css 004

Imaginea are 240 px lățime și 480 px înălțime. Fiecare dintre pictograme acoperă o suprafață de 120x120px. Pentru a mapa fiecare dintre imagini, începem din colțul din stânga sus al imaginii cu coordonatele (0px 0px) - urmând ordinea „stânga - sus”.

În acest fel, imaginile din coloana din stânga a sprite-ului sunt situate la:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Acestea sunt imaginile care trebuie folosite înainte de a trece cu mouse-ul.

Imaginile din coloana din dreapta a sprite-ului sunt situate la:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Editați codul CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
DESCHIS ÎN POPUP
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Containerul cardului de service este o grilă orizontală cu 4 coloane. Fiecare card a fost declarat și ca un container grilă cu 2 rânduri. Observați că am declarat o înălțime fixă ​​pentru fiecare card.

191125 tranziții css 003

Pasul #5. - The Image Sprite

Potrivit W3Schools, un sprite de imagine este o colecție de imagini puse într-o singură imagine. Economisiți lățime de bandă, deoarece pagina nu va trebui să facă o cerere de server pentru fiecare imagine pe care trebuie să o încarce. Acesta va solicita imaginea o dată, apoi veți mapa partea necesară a imaginii în codul CSS.

191125 tranziții css 004

Imaginea are 240 px lățime și 480 px înălțime. Fiecare dintre pictograme acoperă o suprafață de 120x120px. Pentru a mapa fiecare dintre imagini, începem din colțul din stânga sus al imaginii cu coordonatele (0px 0px) - urmând ordinea „stânga - sus”.

În acest fel, imaginile din coloana din stânga a sprite-ului sunt situate la:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Acestea sunt imaginile care trebuie folosite înainte de a trece cu mouse-ul.

Imaginile din coloana din dreapta a sprite-ului sunt situate la:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Editați codul CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 tranziții css 005

Nu-i rău, nu? Să adăugăm o notă cosmetică pentru a termina această parte cu niște căptușeală.

  • Editați codul CSS:
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
DESCHIS ÎN POPUP
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 tranziții css 006

Pasul #6. - Tranzițiile CSS

Proprietatea de tranziție CSS are 4 proprietăți copii diferite:

  • proprietate-tranziție (proprietatea elementului, căruia i se va aplica tranziția)
  • durata tranziției
  • tranziție-funcție de sincronizare
  • tranziție-întârziere

Stenografia este:

tranziție: [proprietate-tranziție] [durata-tranziție] [funcție-temporizare-tranziție] [întârziere-tranziție]

  • Editați codul CSS:
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


După cum puteți observa, este posibil să aplicați mai multe tranziții la diferite proprietăți ale elementelor, separându-le cu o virgulă. Niciuna dintre aceste tranziții nu are o întârziere.

Pentru a face cardul să se rotească în sus, setați o marjă negativă în partea de sus și adăugați valoarea absolută a acestei marje la înălțimea elementului (320px == 20em).

191125 tranziții css 008

Acum este timpul să vizați imaginile și să le faceți să se schimbe cu o tranziție.

  • Editați codul CSS:
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

Din nou:

  • proprietate-tranziție: fundal
  • tranziție-durată: 0,4s
  • tranziție-funcție de sincronizare: pas-sfârșit

Restul este doar maparea la coordonatele exacte (detaliată mai sus) pe sprite-ul imaginii.

191125 tranziții css 009

În cele din urmă, să vizam containerul .hidden .

  • Editați codul CSS:
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

Există două detalii de care să țineți cont:

  • Tranziția pe culoarea textului are o întârziere de tranziție de 0,2s
  • Proprietatea de înălțime a elementului se modifică la trecerea cu mouse-ul fără o tranziție 
191125 tranziții css 010

Tranzițiile sunt acceptate de toate browserele majore.

191125 tranziții css 011

Sper că v-a plăcut acest exercițiu. Multumesc pentru lectura!

Codul poate fi găsit aici.