Tranziții în CSS

Tranziții CSS

Cu tranzițiile CSS, valorile unei proprietăți trec lin la noua lor stare într-o perioadă de timp stabilită.

Proprietatea CSS transition

Un efect de tranziție are nevoie de doar două lucruri: ce proprietate CSS să animeze și cât să dureze schimbarea.

Ambele pot fi setate cu transition, o prescurtare pentru patru proprietăți:

transition-property
transition-duration
transition-timing-function
transition-delay

În exemplul de mai jos, un element <div> de 100px pe 100px are un efect de tranziție de 2 secunde pe proprietatea width.

O tranziție pornește atunci când se schimbă proprietățile elementului, iar această schimbare este adesea provocată de pseudo-clase precum :hover, :active, :focus sau :checked.

Când cursorul părăsește elementul, stilul original revine treptat.

Exemplu

Când treci cu cursorul peste <div>, acesta se lățește până la 300px, iar schimbarea are loc lin.

Creați o pagină cu un div roșu de 100x100px care folosește o tranziție CSS pe proprietatea width, cu o durată de 2 secunde. Când utilizatorul trece cursorul peste div, lățimea se schimbă la 300px.

> Output: complete HTML page

Prompt

Creați o pagină cu un div roșu de 100x100px care folosește o tranziție CSS pe proprietatea width, cu o durată de 2 secunde. Când utilizatorul trece cursorul peste div, lățimea se schimbă la 300px.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transition on Hover</title>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>CSS Transition on Hover</h1>

<p>Mouse over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

Configurarea proprietății transition

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

Modificarea mai multor valori de proprietăți

Când mai multe proprietăți au tranziție în același timp, ele se separă prin virgule.

În exemplul de mai jos, width, height și background-color primesc fiecare o tranziție cu propria durată.

Exemplu

Aici lățimea durează 2 secunde, înălțimea durează 4 secunde, iar culoarea de fundal durează 3 secunde.

Creați o pagină cu un div roșu de 100x100px care face tranziția mai multor proprietăți la trecerea cursorului: width la 300px în 2 secunde, height la 300px în 4 secunde, și background-color la albastru în 3 secunde.

> Output: complete HTML page

Prompt

Creați o pagină cu un div roșu de 100x100px care face tranziția mai multor proprietăți la trecerea cursorului: width la 300px în 2 secunde, height la 300px în 4 secunde, și background-color la albastru în 3 secunde.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transition Multiple Properties</title>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 4s, background-color 3s;
}

div:hover {
  width: 300px;
  height: 300px;
  background-color: blue;
}
</style>
</head>
<body>

<h1>CSS Transition - Multiple Properties</h1>

<p>Mouse over the div element below, to see the transition effect for multiple properties:</p>

<div></div>

</body>
</html>

Proprietăți de tranziție CSS

Toate proprietățile de tranziție CSS sunt listate mai jos:

transition — o prescurtare care combină cele patru proprietăți de tranziție într-o singură proprietate
transition-delay — cât timp (în secunde) așteaptă efectul de tranziție înainte să înceapă
transition-duration — câte secunde sau milisecunde durează efectul de tranziție
transition-property — proprietatea CSS căreia i se aplică efectul de tranziție
transition-timing-function — curba de viteză pe care o urmează efectul de tranziție