Tranziții
O tranziție (transition) reprezintă animația de la un stil la altul pe parcursul unei perioade determinate de timp.
Pentru a crea o tranziție, sunt necesare în primul rând două seturi de proprietăți CSS: stilul inițial, pe care îl va avea elementul la începutul tranziției, și stilul final - rezultatul tranziției. Astfel, să considerăm cea mai simplă tranziție:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tranziție în CSS3</title>
<style>
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
transition-property: background-color;
transition-duration: 2s;
}
div:hover{
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Aici, proprietatea background-color a elementului div este animată. Când cursorul mouse-ului este deasupra elementului, acesta își va schimba culoarea de la gri la roșu. La îndepărtarea cursorului, culoarea va reveni la original.
Pentru a specifica o proprietate ca fiind animată, numele ei este trecut la proprietatea transition-property:
transition-property: background-color;Se pot anima multe alte proprietăți, precum color, background-color, border-color. Lista completă a proprietăților CSS care pot fi animate se poate găsi la adresa www.w3.org/TR/css3-transitions/#animatable-properties.
Apoi, se setează durata tranziției în secunde cu ajutorul proprietății transition-duration:
transition-duration: 2s;De asemenea, se poate seta durata în milisecunde, de exemplu, 500 milisecunde:
transition-duration: 500ms;La final, trebuie definit inițiatorul acțiunii și valoarea finală a proprietății animate background-color. Inițiatorul reprezintă acțiunea care duce la schimbarea unui stil în altul. În CSS, pentru a declanșa o tranziție se pot folosi pseudoclase, de exemplu aici se folosește stilul pentru pseudoclasa :hover. Astfel, când cursorul este deasupra elementului div, se va declanșa tranziția.
Pe lângă pseudoclasa :hover, se pot folosi și alte pseudoclase, cum ar fi :active (link în stare de apăsare) sau :focus (când elementul primește focus).
De asemenea, pentru a declanșa o tranziție se poate folosi și cod JavaScript.
Animarea unui set de proprietăți
Dacă este necesar, putem anima simultan mai multe proprietăți CSS. Astfel, în exemplul de mai sus modificăm stilurile în următorul mod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tranziție în CSS3</title>
<style>
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
transition-property: background-color, width, height, border-color;
transition-duration: 2s;
}
div:hover{
background-color: red;
width: 120px;
height: 120px;
border-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Aici sunt animate simultan patru proprietăți. Deși animația pentru toate durează 2 secunde, putem specifica un timp diferit pentru fiecare proprietate:
transition-property: background-color, width, height, border-color;
transition-duration: 2s, 3s, 1s, 2s;La fel ca în proprietatea transition-property, în transition-duration timpul este enumerat prin virgulă pentru fiecare proprietate animată, iar asocierea timpului la proprietatea respectivă se face prin poziție, adică proprietatea width va fi animată timp de 3 secunde.
În loc să enumerăm toate proprietățile animate, putem pur și simplu să folosim cuvântul cheie all:
transition-property: all;
transition-duration: 2s;Acum vor fi animate toate proprietățile necesare, care își schimbă valorile în stil pentru pseudoclasa :hover.
Funcții de animație
Proprietatea transition-timing-function permite controlul vitezei de desfășurare și executare a animației. Adică această proprietate regulează cum și în ce momente timpul animației se va accelera sau încetini.
Printre valorile acestei proprietăți se numără:
- linear: o funcție de suavizare liniară, schimbarea proprietății se face uniform pe durata timpului
- ease: o funcție de suavizare care accelerează spre mijloc și încetinește spre sfârșit, oferind o schimbare mai naturală
- ease-in: o funcție de suavizare care accelerează la început
- ease-out: o funcție de suavizare care accelerează la sfârșit
- ease-in-out: o funcție de suavizare care accelerează spre mijloc și încetinește spre sfârșit, oferind o schimbare mai naturală
- cubic-bezier: o funcție cubică Bezier este folosită pentru animație
Aplicăm funcția ease-in-out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tranziție în CSS3</title>
<style>
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
transition-property: background-color, width;
transition-duration: 2s, 10s;
transition-timing-function: ease-in-out;
}
div:hover{
background-color: red;
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Pentru a folosi o funcție cubic-bezier, trebuie să specificăm o serie de valori:
transition-timing-function: cubic-bezier(.5, .6, .24, .18);Întârzierea tranziției
Proprietatea transition-delay permite definirea unei întârzieri înainte de executarea tranziției:
transition-delay: 500ms;Perioada de timp este, de asemenea, specificată în secunde (s) sau milisecunde (ms).
Proprietatea transition
Proprietatea transition reprezintă o înregistrare scurtă a proprietăților discutate mai sus. De exemplu, următoarea descriere a proprietăților:
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: ease-in-out;
transition-delay: 500ms;Este echivalentă cu următoarea înregistrare:
transition: background-color 3s ease-in-out 500ms;