body {
  font-family: sans-serif;
}

button {
  width: 140px;
  height: 70px;
  border-style: none;
  border-radius: 10px;
  font-size: large;        
  background-color: rebeccapurple;
  color: white;
}

/* animatie toevoegen aan de knop */
button {
  /* daar de animatie niet onmiddellijk gestart wordt
  moeten we de knop bij het laden van de pagina
  reeds buiten beeld plaatsen */
  transform: translate(-150px, -250px);        
  /* slide-in animatie afspelen */
  animation-name: my-slide-in;
  animation-delay: 1s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes my-slide-in {
  0% {
    transform: translate(-150px, -250px);
    opacity: 0;
    /* Alternatieve oplossing */
    /* background-color: rgba(102, 51, 153, 0); */
  }
  50% {
    transform: translate(150px, 0);
    opacity: 1;
    /* Alternatieve oplossing */
    /* background-color: rgba(102, 51, 153, 1); */
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
    /* Alternatieve oplossing */
    /* background-color: rgba(102, 51, 153, 1); */
  }
}