Animationen in Grav

Grav unterstützt alle Web-Animationstechniken. Hier eine Übersicht mit Beispielen.

CSS-Animationen

Keyframe-Animation

Keyframes werden im style-Tag definiert. Beispiel-Syntax mit eckigen Klammern:

[style]
@keyframes splexus-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes splexus-slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes splexus-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.splexus-pulse-box {
  animation: splexus-pulse 2s ease-in-out infinite;
  padding: 2rem;
  background: linear-gradient(135deg, #6c63ff, #00d4ff);
  color: white;
  border-radius: 12px;
  text-align: center;
}

.splexus-slide-card {
  animation: splexus-slide-in 0.8s ease-out forwards;
  padding: 1.5rem;
  background: #1a1a2e;
  border-left: 4px solid #6c63ff;
  border-radius: 8px;
  margin: 1rem 0;
}

.splexus-grad-box {
  background: linear-gradient(-45deg, #6c63ff, #00d4ff, #ff6b9d, #6c63ff);
  background-size: 400% 400%;
  animation: splexus-gradient 8s ease infinite;
  padding: 3rem;
  border-radius: 16px;
  color: white;
  text-align: center;
}
/* Markup: je ein Element mit .splexus-pulse-box, .splexus-slide-card und .splexus-grad-box */
[/style]

Transition (Hover-Effekte)

[style]
.splexus-hover-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1.5rem;
  background: #16213e;
  border-radius: 12px;
  cursor: pointer;
}
.splexus-hover-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(108, 99, 255, 0.3);
  background: #1a1a2e;
}
[/style]
[button class="splexus-hover-card"]Hover über mich![/button]

JavaScript-Animationen

Scroll-basierte Animation (Intersection Observer)

[style]
.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}
.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Markup: drei Elemente mit class="fade-in-section" */
[/style]

[script]
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.fade-in-section').forEach(el => observer.observe(el));
[/script]

Typing-Animation

/* Markup: ein Element mit id="typed-text" */
[script]
const texts = ["Splexus", "die Zukunft", "deine Plattform"];
let textIndex = 0, charIndex = 0, isDeleting = false;

function typeWriter() {
  const current = texts[textIndex];
  const el = document.getElementById('typed-text');
  if (isDeleting) {
    el.textContent = current.substring(0, charIndex--);
    if (charIndex < 0) { isDeleting = false; textIndex = (textIndex + 1) % texts.length; setTimeout(typeWriter, 500); return; }
    setTimeout(typeWriter, 50);
  } else {
    el.textContent = current.substring(0, charIndex++);
    if (charIndex > current.length) { isDeleting = true; setTimeout(typeWriter, 2000); return; }
    setTimeout(typeWriter, 100);
  }
}
typeWriter();
[/script]

SVG-Animationen

SVG mit CSS-Animation (rotierender Ring)

SVG-Code wird mit dem svg-Tag geschrieben. Beispiel mit eckigen Klammern:

[svg width="120" height="120" viewBox="0 0 120 120"]
  [circle cx="60" cy="60" r="50" fill="none" stroke="#e2e8f0" stroke-width="8"/]
  [g class="ring-spinner"]
    [circle cx="60" cy="60" r="50" fill="none" stroke="#6c63ff" stroke-width="8"
      stroke-linecap="round" stroke-dasharray="110 204"/]
    [circle cx="60" cy="10" r="5" fill="#00a6ca"/]
  [/g]
  [style]
    .ring-spinner {
      transform-box: view-box;
      transform-origin: 60px 60px;
      animation: spin 1.5s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
  [/style]
[/svg]

SVG Pfad-Animation (gezeichnete Linie)

[svg width="300" height="100" viewBox="0 0 300 100"]
  [path d="M10,50 Q150,10 290,50" fill="none" stroke="#00d4ff" stroke-width="3"
    stroke-dasharray="400" stroke-dashoffset="400"
    style="animation: draw-line 3s ease-out forwards;"/]
  [style]
    @keyframes draw-line { to { stroke-dashoffset: 0; } }
  [/style]
[/svg]

Bouncing-Icons

[style]
@keyframes bounce-icon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.splexus-bounce { animation: bounce-icon 1.5s ease-in-out infinite; display: inline-block; }
.splexus-bounce:nth-child(2) { animation-delay: 0.2s; }
.splexus-bounce:nth-child(3) { animation-delay: 0.4s; }
/* Markup: drei .splexus-bounce-Elemente, z. B. 🚀 ⚡ ✨ */
[/style]

Lottie-Animationen

[script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"][/script]
/* Markup: ein 200 × 200 px großes Element mit id="lottie-container" */
[script]
lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/de/animationen/splexus-lottie-orbit.json'
});
[/script]