CSS
övergångar
Sök…
Syntax
- övergång: [övergångsegenskaper] [övergångsperiod] [övergångstidsfunktion] [övergångsfördröjning];
parametrar
| Parameter | detaljer |
|---|---|
| övergång-fastighet | Den specifika CSS-egenskapen vars värdeförändring måste överföras (eller) all , om alla övergångbara egenskaper behöver överföras. |
| Övergångsperiod | Varaktigheten (eller perioden) i sekunder ( s ) eller millisekunder ( ms ) under vilken övergången måste ske. |
| övergång-timing-funktion | En funktion som beskriver hur mellanvärdena under övergången beräknas. Vanligt använda värden är ease , ease-in , ease-out , ease-in-out , linear , cubic-bezier() , steps() . Mer information om de olika timingfunktionerna finns i W3C-specifikationerna . |
| övergång-fördröjning | Den tid som måste ha gått innan övergången kan börja. Kan anges i sekunder ( s ) eller millisekunder ( ms ) |
Anmärkningar
Vissa äldre webbläsare stöder endast leverantörsfixerade transition :
-
-webkit: Chrome 25-, Safari 6-, Safari & Chrome för iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- för Android. -
-moz: Firefox 15-. -
-o: Opera 11.5-, Opera Mobile 12-.
Exempel:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
Övergångsbild
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
html
<div></div>
Det här exemplet kommer att ändra bakgrundsfärgen när div är svävat kommer bakgrundsfärgsförändringen att pågå i 1 sekund.
Övergång (longhand)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
html
<div></div>
- övergångsegenskap : Anger CSS-egenskaper som övergångseffekten är för. I det här fallet kommer div att expandera både horisontellt och vertikalt när det hålls musen.
- övergångsperiod : Anger hur lång tid en övergång tar att slutföra. I exemplet ovan kommer höjd- och breddövergångarna att ta 1 sekund respektive 500 millisekunder.
- övergång-timing-funktion : Anger hastighetskurvan för övergångseffekten. Ett linjärt värde indikerar att övergången har samma hastighet från början till slut.
- övergångsfördröjning : Anger hur lång tid som krävs för att vänta innan övergångseffekten startar. I detta fall börjar höjden omedelbart övergå, medan bredden väntar 1 sekund.
kubisk-bezier
Funktionen cubic-bezier är en övergångsstimningsfunktion som ofta används för anpassade och smidiga övergångar.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
Funktionen tar fyra parametrar:
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
Dessa parametrar kommer att kartläggas till punkter som är en del av en Bézier-kurva :
För CSS Bézier Curves är P0 och P3 alltid på samma plats. P0 är vid (0,0) och P3 är på (1,1), vilket menar att parametrarna som skickas till den kubiska bezierfunktionen endast kan vara mellan 0 och 1.
Om du passerar parametrar som inte finns i det här intervallet kommer funktionen att vara en linear övergång.
Eftersom kubik-bezier är den mest flexibla övergången i CSS, kan du översätta alla andra övergångstidsfunktioner till kubik-bezier-funktioner:
linear : cubic-bezier(0,0,1,1)
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)