Transition

Typisk bruk er for å framheve valg i menyer når musepeker er over alternativene.

a {
  color: #fff;
  background-color: #333;
  transition: all 1s ease-out;
}

a:hover,
a:focus {
  color: #333;
  background-color: #fff;
}

Når bruker plasserer markøren over en link vil du se at endringene i style tar 1s og bruker ease-out.

 transition: <property> <duration> <timing-function> <delay>;

eller på norsk: transition: egenskap varighet timing-metode utsettelse.

Dermed betyr transition: all 3s linear 1s; at alle endringer skal ta 3s, være lineære og ha en delay (utsettelse) på 1s.

Filter

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

Disse virker på alle elementer, men noen gir bare mening i forhold til bilder.

uten filter	filter:hue-rotate(90deg);
filter:sepia(60%);	filer:drop-shadow(16px 16px 20px blue);