CSS-animasjoner på Iterate.no

..

Skrevet av Ole Jacob og Teodor

Hvordan funker egentlig lappebrett-animasjonen på https://www.iterate.no/?

Den animasjonen er det Ole Jacob som har laget. Og hvis du vil lære å gjøre det selv, kan du bare fortsette å lese!

Slik lager du en CSS-animasjon

<style>
#example1 {
  /* animation properties */
  animation-name: my-animation;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  /* other properties */
  width: 300px;
  height: 100px;
  border-radius: 10px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;

  z-index: -1;
}

@keyframes my-animation {
  from {
    background-color: #ff7a59;
    width: 300px;
    top: 10px;
  }
  to {
    background-color: #33475b;
    width: 50px;
    top: 100px;
  }
}
</style>

<div id="example1"></div>

TODO:

• Erstatte CSS-animering-eksempelet Teodor fant på Internett med noe som brukes på Iterate.no. Feks meny-snurreren, hvis den funker bra. Bretten i hjørnet på WORK-knappen er kanskje litt for stort til å inkludere all koden på?
• Renskrive / fjerne kode – få det så minimalt som mulig.
• Vurdere å kommentere på bretten på knappene.
  • En mulighet er å inkludere litt kode, men ikke lage et fullstendig eksempel.
  • En annen mulighet er å bare ha én setning om hva man bør se etter i inspectoren når man går til Iterate.no.

Hva er hydrering i browser? Hvorfor gjør man det?

Optional!

Hva er tailwind? Hvorfor bruker man tailwind?

Optional!