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:
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
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 |
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:
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>:
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.
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:
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>
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:
#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>
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:
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>
Följande exempel lägger till en övergångseffekt till transformationen:
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>
CSS-övergångsegenskaperna kan specificeras en efter en, så här:
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
:
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>
Följande tabell listar alla CSS-övergångsegenskaper:
En förkortningsegenskap för att sätta de fyra övergångsegenskaperna till en enskild egenskap
Anger en fördröjning (i sekunder) för övergångseffekten
Anger hur många sekunder eller millisekunder en övergångseffekt tar att slutföra
Anger namnet på CSS-egenskapen som övergångseffekten gäller
Anger hastighetskurvan för övergångseffekten