CSS & Styling

Hoe maak je smooth animaties met transitions?

Transitions maken veranderingen smooth in plaats van instant.

Home/Categorieën/CSS & Styling/Hoe maak je smooth animaties met transitions?

Transition properties

transition-property: welke property animeren transition-duration: hoe lang (ms/s) transition-timing-function: ease, linear, ease-in-out transition-delay: wacht voor start

Shorthand

transition: property duration timing-function delay; Often: transition: all 0.3s ease;

Code Voorbeelden

CSSButton hover transition
.button {
  background: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  
  /* Smooth transition voor background */
  transition: background 0.3s ease;
}

.button:hover {
  background: darkblue;
}

/* Multiple properties */
.card {
  background: white;
  transform: scale(1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  transition: all 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

Relevante trefwoorden

transitionanimationsmoothease

Gerelateerde Vragen

← Terug naar CSS & StylingAlle categorieën →