CSS-övergångar


Innehållsförteckning

    Visa innehållsförteckning


CSS-övergångar

CSS-övergångar låter dig ändra egenskapsvärden smidigt under en given varaktighet.

För muspekaren över elementet nedan för att se en CSS-övergångseffekt:

CSS

I det här kapitlet kommer du att lära dig om följande egenskaper:

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

Webbläsarstöd för övergångar

Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder egenskapen.

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

Hur använder man CSS-övergångar?

För att skapa en övergångseffekt måste du ange två saker:

  • CSS-egenskapen du vill lägga till en effekt på

  • effektens varaktighet

Obs! Om varaktighetsdelen inte anges kommer övergången inte att ha någon effekt, eftersom standardvärdet är 0.

Följande exempel visar ett 100px * 100px rött <div>-element. <div> elementet har också specificerat en övergångseffekt för egenskapen width, med en varaktighet på 2 sekunder:

Exempel

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

Övergångseffekten startar när den angivna CSS-egenskapen (width) ändrar värde.

Låt oss nu ange ett nytt värde för egenskapen width när en användare för muspekaren över elementet <div>:

Exempel

div:hover
{
  width: 300px;
}

Prova själv →

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


Lägg märke till att när markören flyttas ut ur elementet kommer den gradvis att ändras tillbaka till sin ursprungliga stil.


Ändra flera fastighetsvärden

Följande exempel lägger till en övergångseffekt för både bredd- och höjdegenskapen, med en varaktighet på 2 sekunder för bredden och 4 sekunder för höjden:

Exempel

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

Prova själv →

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




Ange hastighetskurvan för övergången

Egenskapen transition-timing-function anger hastighetskurvan för övergångseffekten.

Egenskapen transition-timing-function kan ha följande värden:

ease

- specificerar en övergångseffekt med en långsam start, sedan snabbt och sedan långsamt slut (detta är standard)

linear

- anger en övergångseffekt med samma hastighet från början till slut

ease-in

- specificerar en övergångseffekt med en långsam start

ease-out

- specificerar en övergångseffekt med ett långsamt slut

ease-in-out

- specificerar en övergångseffekt med långsam start och slut

cubic-bezier(n,n,n,n)

- låter dig definiera dina egna värden i en cubic-bezier-funktion

Följande exempel visar några av de olika hastighetskurvorna som kan användas:

Exempel

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

Prova själv →

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



Fördröja övergångseffekten

Egenskapen transition-delay anger en fördröjning (i sekunder) för övergångseffekten.

Följande exempel har en fördröjning på 1 sekund innan start:

Exempel

div {
  
transition-delay: 1s;
}

Prova själv →

<!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öljande exempel lägger till en övergångseffekt till transformationen:

Exempel

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

Prova själv →

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



Fler övergångsexempel

CSS-övergångsegenskaperna kan specificeras en efter en, så här:

Exempel

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

Prova själv →

<!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 genom att använda förkortningsegenskapen transition:

Exempel

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

Prova själv →

<!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-övergångsegenskaper

Följande tabell listar alla CSS-övergångsegenskaper:

transition

En förkortningsegenskap för att sätta de fyra övergångsegenskaperna till en enskild egenskap

transition-delay

Anger en fördröjning (i sekunder) för övergångseffekten

transition-duration

Anger hur många sekunder eller millisekunder en övergångseffekt tar att slutföra

transition-property

Anger namnet på CSS-egenskapen som övergångseffekten gäller

transition-timing-function

Anger hastighetskurvan för övergångseffekten