Animating the OCN

Animating the button

Wir möchten, dass der Button bei hover die Farbe wechselt. Dafür wenden wir die Eigenschaft transition auf den Button an.

button {
  background-color: goldenrod;
  border: 2px solid currentColor;
  transition: background-color 0.3s ease-out;
  &:hover {
    background-color: palegoldenrod;
  }
}

Animating the containers

Um die Container ein- und auszusliden, benutzen wir ebenfalls transition, das wir diesmal auf transform anwenden.

.site-container {
  transition: transform 0.3s ease-out;
}

.offsite-container {
  transition: transform 0.3s ease-out;
}