Overgang - CSS-triks | CSS-almanakk 2025

Den transitionegenskapen er en forkortelse egenskap som brukes til å representere opp til fire overgangsrelaterte longhand egenskaper:

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

Disse overgangsegenskapene lar elementene endre verdier over en spesifisert varighet, og animere eiendomsendringene, i stedet for at de skjer umiddelbart. Her er et enkelt eksempel som overgår bakgrunnsfargen til et element på: sveve:

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

Det vil ta et halvt sekund når musen er over den for å bli fra rød til grønn. Her er en live demonstrasjon av en slik overgang:

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

Du kan spesifisere en bestemt egenskap som vi har ovenfor, eller bruke verdien "alle" for å referere til overgangsegenskaper.

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

I dette eksemplet over vil både bakgrunn og polstring overgå, på grunn av verdien “all” spesifisert for transition-propertydelen av stenografien.

Du kan komma med separate verdisett for å gjøre forskjellige overganger på forskjellige egenskaper:

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

For det meste betyr ikke rekkefølgen av verdiene noe - med mindre en forsinkelse er spesifisert. Hvis du angir en forsinkelse, må du først angi en varighet. Den første verdien som nettleseren gjenkjenner som en gyldig tidsverdi, vil alltid representere varigheten. Eventuell påfølgende gyldig tidsverdi blir analysert som forsinkelse.

Noen eiendommer kan ikke overføres fordi de ikke er animasjonsegenskaper. Se spesifikasjonen for en full liste over hvilke eiendommer som kan animeres.

Ved å spesifisere overgangen på selve elementet, definerer du overgangen som skal skje i begge retninger. Det vil si at når stilene endres (f.eks. Når du holder på), vil egenskapene overgå, og når stilene endres tilbake (f.eks. Når du holder markøren av) vil de overgå. Følgende overganger for eksempel på sveve, men ikke på sveve av:

Se pennen zohgt av Louis Lazaris (@impressivewebs) på CodePen.

Dette skjer fordi overgangen er flyttet til :hovertilstandsvelgeren og det ikke er noen samsvarende overgang på velgeren som retter seg mot elementet direkte uten :hovertilstanden.

For kompatibilitet i alle støttende nettlesere kreves leverandørprefikser, med standardsyntaks deklarert sist:

.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 versjonen av IE som støtter transition) krever ikke -ms-prefikset.