CSS: transities

CSS transitions maken het mogelijk om vloeiende veranderingen te creëren tussen verschillende CSS property waarden over een bepaalde tijdsduur. In plaats van abrupte veranderingen krijg je elegante animaties die de gebruikerservaring verbeteren.

Basis syntax

.element {
  /* Property die gaat veranderen */
  background-color: blue;
  
  /* Transition definitie */
  transition: background-color 0.3s ease;
}

.element:hover {
  /* Nieuwe waarde triggert transition */
  background-color: red;
}

Link

Properties

Transitions worden opgebouwd met verschillende properties. In de praktijk zal je veelal de shorthand syntax gebruiken die we hierna behandelen.

.element {
  /* Enkele property */
  transition-property: background-color;
  /* Meerdere properties */
  transition-property: background-color, transform, opacity;
  /* Alle animeerbare properties */
  transition-property: all;
  /* Geen transitions */
  transition-property: none;

  /* Duur */
  transition-duration: .3s;

  /* Timing functies */
  transition-timing-function: ease;        /* Standaard: langzaam-snel-langzaam */
  transition-timing-function: linear;      /* Constante snelheid */
  transition-timing-function: ease-in;     /* Langzaam starten */
  transition-timing-function: ease-out;    /* Langzaam eindigen */
  transition-timing-function: ease-in-out; /* Langzaam aan beide kanten */
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce effect */

  /* Vertraging */
  transition-delay: .1s;
}

Shorthand syntax

De transition property combineert alle transition properties:

.element {
  /* transition: property duration timing-function delay */
  transition: background-color 0.3s ease 0.1s;
  
  /* Meerdere transitions */
  transition: 
      background-color 0.3s ease,
      transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      opacity 0.2s linear 0.1s;
  
  /* Alle properties met zelfde settings */
  transition: all 0.3s ease;
}