Overgang - CSS-tricks | CSS Almanak 2025

Den transitionegenskab er en forkortelse egenskab anvendes til at repræsentere op til fire overgangsrelaterede hånden egenskaber:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Disse overgangsegenskaber tillader elementer at ændre værdier over en bestemt varighed og animere egenskabsændringerne i stedet for at få dem til at ske med det samme. Her er et simpelt eksempel, der overgår baggrundsfarven på et element på: svæver:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Denne div vil tage et halvt sekund, når musen er over det for at blive fra rød til grøn. Her er en live demonstration af en sådan overgang:

Se Pen Transition Demo af Louis Lazaris (@impressivewebs) på CodePen.

Du kan angive en bestemt egenskab, som vi har ovenfor, eller bruge værdien "alle" til at henvise til overgangsegenskaber.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

I dette ovenstående eksempel overgår både baggrund og polstring på grund af den værdi “alle”, der er angivet for den transition-propertydel af stenografien.

Du kan komme med separate værdisæt for at udføre forskellige overgange på forskellige egenskaber:

div ( transition: background 0.2s ease, padding 0.8s linear; )

For det meste betyder rækkefølgen af værdier ikke noget - medmindre der er angivet en forsinkelse. Hvis du angiver en forsinkelse, skal du først angive en varighed. Den første værdi, som browseren genkender som en gyldig tidsværdi, repræsenterer altid varigheden. Enhver efterfølgende gyldig tidsværdi analyseres som forsinkelse.

Nogle egenskaber kan ikke overføres, fordi de ikke er animerbare egenskaber. Se spec for en komplet liste over hvilke egenskaber der kan animeres.

Ved at specificere overgangen på selve elementet definerer du overgangen til at ske i begge retninger. Det vil sige, at når typografierne ændres (f.eks. Ved svævning til), vil de egenskaber overgå, og når typografierne ændres tilbage (f.eks. Ved svævningen fra), vil de overgå. For eksempel overgår følgende demo til svæver, men ikke til svæver fra:

Se Pen zohgt af Louis Lazaris (@impressivewebs) på CodePen.

Dette sker, fordi overgangen er flyttet til :hovertilstandsvælgeren, og der ikke er nogen matchende overgang på vælgeren, der målretter mod elementet direkte uden :hovertilstanden.

For kompatibilitet i alle understøttende browsere kræves leverandørpræfikser med standardsyntaxen erklæret sidst:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (den første stabile version af IE, der understøtter transition) kræver ikke -ms-præfikset.