CSS-átmenetek

Tartalomjegyzék

Tartalomjegyzék megjelenítése

CSS-átmenetek

A CSS-átmenetek lehetővé teszik a tulajdonságok zökkenőmentes megváltoztatását egy adott időtartamon keresztül.

Vigye az egeret az alábbi elemre a CSS-átmeneti hatás megtekintéséhez:

CSS

Ebben a fejezetben a következő tulajdonságokat ismerheti meg:

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

Böngésző támogatás az átmenetekhez

A táblázatban szereplő számok az első böngészőverziót adják meg, amely teljes mértékben támogatja a tulajdonságot.

Property
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

Hogyan kell használni a CSS átmeneteket?

Átmeneti effektus létrehozásához két dolgot kell megadnia:

az a CSS-tulajdonság, amelyhez effektust szeretne hozzáadni
a hatás időtartama

Megjegyzés: Ha az időtartam rész nincs megadva, az átmenetnek nincs hatása, mert az alapértelmezett érték 0.

A következő példa egy 100 képpont * 100 képpont méretű piros <div> elemet mutat be. A <div> elem egy átmeneti effektust is megadott a width tulajdonsághoz, 2 másodperces időtartammal:

Példa

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

Az átmeneti hatás akkor indul el, amikor a megadott CSS-tulajdonság (szélesség) értéke megváltozik.

Most adjunk meg egy új értéket a width tulajdonságnak, amikor a felhasználó a <div> elem fölé viszi az egeret:

Példa

div:hover
{
  width: 300px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

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

<h1>The transition Property</h1>

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

</body>
</html>

Figyelje meg, hogy amikor a kurzor kilép az elemből, az fokozatosan visszavált az eredeti stílusára.

Több tulajdonságérték módosítása

A következő példa átmeneti effektust ad hozzá mind a szélesség, mind a magasság tulajdonsághoz, időtartammal 2 másodperc a szélességhez és 4 másodperc a magassághoz:

Példa

div
{
  transition: width 2s, height 4s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

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

<h1>The transition Property</h1>

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

<div></div>

</body>
</html>

Adja meg az átmenet sebességgörbéjét

A transition-timing-function tulajdonság az átmeneti effektus sebességgörbéjét adja meg.

Az átmeneti időzítés függvény tulajdonságának a következő értékei lehetnek:

ease: - egy átmeneti effektust ad meg lassú kezdéssel, majd gyorsan, majd lassan véget ér (ez az alapértelmezett)
linear: - az elejétől a végéig azonos sebességű átmeneti effektust határoz meg
ease-in: - lassú indítású átmeneti effektust határoz meg
ease-out: - lassú végű átmeneti hatást határoz meg
ease-in-out: - lassú kezdetű és végű átmeneti hatást határoz meg
cubic-bezier(n,n,n,n): - lehetővé teszi saját értékek meghatározását egy kocka-bezier függvényben

A következő példa néhány használható sebességgörbét mutat be:

Példa

#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;}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#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:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>

Késleltesse az Átmeneti effektust

Az transition-delay tulajdonság késleltetést ad meg (másodpercben) az átmeneti effektushoz.

A következő példa 1 másodperces késleltetéssel indul indítás előtt:

Példa

div {
  
transition-delay: 1s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

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

<h1>The transition-delay Property</h1>

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

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Átmenet + Átalakulás

A következő példa átmeneti effektust ad az átalakításhoz:

Példa

div {
  transition: 
width 2s, height 2s, transform 2s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

További átmeneti példák

A CSS átmenet tulajdonságai egyenként adhatók meg, így:

Példa

div
{
  transition-property: width;
   
transition-duration: 2s;
   
transition-timing-function: linear;
  transition-delay: 1s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

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

<h1>The transition Properties Specified One by One</h1>

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

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

vagy a transition gyorsírási tulajdonság használatával:

Példa

div
{
   
transition: width 2s linear 1s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

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

<h1>Using The transition Shorthand Property</h1>

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

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

CSS átmenet tulajdonságai

Az alábbi táblázat felsorolja az összes CSS-átmeneti tulajdonságot:

transition: Gyorsírási tulajdonság a négy átmeneti tulajdonság egyetlen tulajdonsággá történő beállításához
transition-delay: Megadja az átmeneti effektus késleltetését (másodpercben).
transition-duration: Meghatározza, hogy egy átmeneti effektus hány másodpercig vagy ezredmásodpercig tart
transition-property: Megadja annak a CSS-tulajdonságnak a nevét, amelyre az átmeneti effektus vonatkozik
transition-timing-function: Megadja az átmeneti effektus sebességgörbéjét