HTML-animationstekniker

Att animera webbsidor kan göra dem mer engagerande och interaktiva. Här är en snabbguide till några vanliga HTML-animationstekniker:

CSS-övergångar

• Används för enkla animationer som ändrar elementens egenskaper över tid.
• Definieras med transition-egenskapen.
• Exempel: transition: opacity 1s ease-in-out;

CSS-animationer

• Ger mer kontroll över animationer, inklusive varaktighet, fördröjning och timingfunktion.
• Definieras med @keyframes-regeln.
• Exempel:

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

HTML5 Canvas

• Ger möjlighet att skapa avancerade, interaktiva animationer.
• Använder JavaScript för att rita på en <canvas>-element.
• Exempel:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);

Enkel animering med HTML och CSS

<div class="fade-in">Fade in</div>

.fade-in {
  opacity: 0;
  animation: fade-in 1s ease-in-out forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}