CSS-overgange

Indholdsfortegnelse

Vis indholdsfortegnelse

CSS-overgange

CSS-overgange giver dig mulighed for at ændre egenskabsværdier jævnt over en given varighed.

Før musen over elementet nedenfor for at se en CSS-overgangseffekt:

CSS

I dette kapitel lærer du om følgende egenskaber:

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

Browserstøtte til overgange

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

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

Hvordan bruger man CSS-overgange?

For at skabe en overgangseffekt skal du angive to ting:

den CSS-egenskab, du vil tilføje en effekt til
virkningens varighed

Bemærk: Hvis varighedsdelen ikke er angivet, vil overgangen ikke have nogen effekt, fordi standardværdien er 0.

Følgende eksempel viser et 100px * 100px rødt <div>-element. <div> elementet har også angivet en overgangseffekt for egenskaben width med en varighed på 2 sekunder:

Eksempel

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

Overgangseffekten starter, når den angivne CSS-egenskab (bredde) ændrer værdi.

Lad os nu angive en ny værdi for width-egenskaben, når en bruger bevæger musen over <div>-elementet:

Eksempel

div:hover
{
  width: 300px;
}

Prøv det selv →

<!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>

Bemærk, at når markøren bevæger sig ud af elementet, vil den gradvist skifte tilbage til sin oprindelige stil.

Ændre flere ejendomsværdier

Følgende eksempel tilføjer en overgangseffekt for både egenskaben bredde og højde med en varighed på 2 sekunder for bredden og 4 sekunder for højden:

Eksempel

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

Prøv det selv →

<!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>

Angiv hastighedskurven for overgangen

Egenskaben transition-timing-function angiver hastighedskurven for overgangseffekten.

Egenskaben transition-timing-function kan have følgende værdier:

ease: - specificerer en overgangseffekt med en langsom start, derefter hurtig og derefter langsom (dette er standard)
linear: - angiver en overgangseffekt med samme hastighed fra start til slut
ease-in: - angiver en overgangseffekt med en langsom start
ease-out: - angiver en overgangseffekt med en langsom afslutning
ease-in-out: - angiver en overgangseffekt med en langsom start og afslutning
cubic-bezier(n,n,n,n): - lader dig definere dine egne værdier i en cubic-bezier funktion

Følgende eksempel viser nogle af de forskellige hastighedskurver, der kan bruges:

Eksempel

#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øv det selv →

<!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>

Forsink overgangseffekten

Egenskaben transition-delay angiver en forsinkelse (i sekunder) for overgangseffekten.

Følgende eksempel har en forsinkelse på 1 sekund før start:

Eksempel

div {
  
transition-delay: 1s;
}

Prøv det selv →

<!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>

Transition + Transformation

Følgende eksempel tilføjer en overgangseffekt til transformationen:

Eksempel

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

Prøv det selv →

<!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>

Flere overgangseksempler

CSS-overgangsegenskaberne kan specificeres én efter én, sådan her:

Eksempel

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

Prøv det selv →

<!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>

eller ved at bruge stenografiegenskaben transition:

Eksempel

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

Prøv det selv →

<!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-overgangsegenskaber

Følgende tabel viser alle CSS-overgangsegenskaberne:

transition: En stenografiegenskab til at sætte de fire overgangsegenskaber til en enkelt egenskab
transition-delay: Angiver en forsinkelse (i sekunder) for overgangseffekten
transition-duration: Angiver, hvor mange sekunder eller millisekunder en overgangseffekt tager at fuldføre
transition-property: Angiver navnet på den CSS-egenskab, som overgangseffekten er til
transition-timing-function: Angiver hastighedskurven for overgangseffekten