@keyframes-reglen

Reglen @keyframes definerer nøgleframes for animation. Et nøgleframe repræsenterer forskellige egenskaber for vores CSS-element, for eksempel position, størrelse, farve osv., som anvendes på elementet på et bestemt tidspunkt.

Syntaks

css@keyframes animation-navn {
  nøgleframes
}

Eksempel

Definer nøgleframes:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: anim 3s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Eksempel

Lad os nu flytte vores firkant fra top til bund ved hjælp af animation:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 10%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Eksempel

Lad os øge bredden af vores figur med hjælp af animation ved at angive nøglepunkter i procenter:

html<div id="elem"></div>

css@keyframes anim {
  from {
    width: 10%;
  }
  to {
    width: 40%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Eksempel

Lad os nu ændre opaciteten af vores figur:

html<div id="elem"></div>

css@keyframes anim {
  from {
    background-color: #467CBC;
  }
  to {
    background-color: #C2DDFD;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Se også