Curba de viteză a tranziției CSS
Proprietatea transition-timing-function stabilește curba de viteză a unui efect de tranziție.
Aceasta poate avea una dintre aceste valori:
ease- începe lent, accelerează, apoi se termină lent (aceasta este valoarea implicită)linear- păstrează aceeași viteză de la început până la sfârșitease-in- începe lentease-out- se termină lentease-in-out- are un început lent și un final lentcubic-bezier(n,n,n,n)- vă permite să setați propriile valori într-o funcție cubic-bezier
Exemplu
Diferite curbe de viteză pentru tranziție:
Prompt
Creați o pagină cu cinci elemente div care devin mai late la trecerea cursorului, fiecare folosind o valoare diferită de transition-timing-function: linear, ease, ease-in, ease-out și ease-in-out. Etichetați fiecare div cu numele funcției sale de sincronizare.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Speed Curves</title>
<style>
div.box {
width: 100px;
height: 100px;
background-color: red;
color: white;
font-weight: bold;
line-height: 100px;
text-align: center;
margin-bottom: 10px;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div.box {
transition: width 2s;
}
div.box:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Transition Speed Curves</h1>
<p>Hover over the div elements below to see the different speed curves:</p>
<div id="div1" class="box">linear</div>
<div id="div2" class="box">ease</div>
<div id="div3" class="box">ease-in</div>
<div id="div4" class="box">ease-out</div>
<div id="div5" class="box">ease-in-out</div>
</body>
</html>
Întârzierea tranziției CSS
Proprietatea transition-delay setează o întârziere înainte ca tranziția să înceapă.
Valoarea este setată în secunde (s) sau milisecunde (ms).
Exemplu
Adăugați o întârziere de 1 secundă înainte ca tranziția să înceapă:
Prompt
Creați o pagină cu un div care își schimbă lățimea la trecerea cursorului, folosind o tranziție CSS cu o întârziere de 1 secundă înainte de a începe.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Delay</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Transition Delay</h1>
<p>Hover over the div element below. The transition will start after a 1 second delay:</p>
<div></div>
</body>
</html>
Tranziție + Transformare
Tranziție div cu transformare
Acest exemplu combină tranziția și transformarea pe un element <div>:
Prompt
Creați o pagină cu un div care face tranziția lățimii, înălțimii, culorii de fundal și a transformării (rotație) la trecerea cursorului, folosind o durată de 2 secunde pentru fiecare proprietate.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition + Transform (Div)</title>
<style>
div.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
div.box:hover {
width: 200px;
height: 200px;
background-color: blue;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element to see a transition combined with a transform:</p>
<div class="box"></div>
</body>
</html>
Tranziție buton cu transformare
Acest exemplu combină tranziția și transformarea pe un buton:
Prompt
Creați o pagină cu un buton care face tranziția culorii de fundal și a transformării (scalare) la trecerea cursorului, folosind sincronizarea ease-out timp de 1 secundă.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Transition + Transform</title>
<style>
button {
padding: 15px 30px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 1s ease-out, transform 1s ease-out;
}
button:hover {
background-color: #45a049;
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>Button Transition + Transform</h1>
<p>Hover over the button to see a transition combined with a transform:</p>
<button>Hover Me</button>
</body>
</html>
Mai multe exemple de tranziție
Proprietățile de tranziție CSS pot fi scrise una câte una, sau folosind proprietatea prescurtată transition.
Proprietăți individuale
Setarea fiecărei proprietăți de tranziție separat:
Prompt
Creați o pagină cu un div care devine mai lat la trecerea cursorului, folosind proprietățile individuale de tranziție: transition-property setată la width, transition-duration setată la 2s, transition-timing-function setată la linear și transition-delay setată la 1s.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Individual Transition Properties</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Individual Transition Properties</h1>
<p>Hover over the div element below (there is a 1 second delay before the transition starts):</p>
<div></div>
</body>
</html>
Proprietate prescurtată
Folosind proprietatea prescurtată transition:
Prompt
Creați o pagină cu un div care devine mai lat la trecerea cursorului, folosind proprietatea prescurtată de tranziție: width 2s linear 1s.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shorthand Transition</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Shorthand Transition</h1>
<p>Hover over the div element below (there is a 1 second delay before the transition starts):</p>
<div></div>
</body>
</html>