Experte182025-01-15

SCSS Animations - CSS Animations & Transitions

Meistere CSS Animations mit SCSS. Keyframes, Transitions, Transform und Animation Libraries für moderne Web-Effekte.

#scss#animations#transitions#keyframes

SCSS Animations - CSS Animations & Transitions

Lerne wie du beeindruckende Animationen mit SCSS erstellst und organisierst.

CSS Transitions

Transitions animieren Änderungen von CSS-Properties:

// Basic Transition
.button {
  background: $primary;
  transition: background 300ms ease;

  &:hover {
    background: darken($primary, 10%);
  }
}

// Multiple Properties
.card {
  transform: translateY(0);
  box-shadow: $shadow-sm;
  transition:
    transform 300ms ease,
    box-shadow 300ms ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: $shadow-xl;
  }
}

// All Properties
.element {
  transition: all 300ms ease;
}

SCSS Transition Mixins

// abstracts/_animations.scss
@mixin transition($properties...) {
  $transitions: ();

  @each $prop in $properties {
    $transitions: append($transitions, $prop 300ms ease, comma);
  }

  transition: $transitions;
}

// Usage
.button {
  @include transition(background, transform, box-shadow);

  &:hover {
    background: $primary-hover;
    transform: scale(1.05);
    box-shadow: $shadow-lg;
  }
}

Timing Functions

// Easing Functions Map
$easings: (
  "linear": linear,
  "ease-in": cubic-bezier(0.42, 0, 1, 1),
  "ease-out": cubic-bezier(0, 0, 0.58, 1),
  "ease-in-out": cubic-bezier(0.42, 0, 0.58, 1),
  "bounce": cubic-bezier(0.68, -0.55, 0.265, 1.55)
);

@function easing($name) {
  @return map-get($easings, $name);
}

// Usage
.element {
  transition: transform 500ms easing("bounce");
}

CSS Animations mit @keyframes

Basic Keyframes

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 1s ease;
}

Multi-Step Animations

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  60% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification {
  animation: slideInRight 600ms ease-out;
}

SCSS Animation Mixins

// Animation Generator Mixin
@mixin keyframes($name) {
  @keyframes #{$name} {
    @content;
  }
}

// Usage
@include keyframes(fadeIn) {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// Animation Shorthand
@mixin animate($name, $duration: 1s, $timing: ease, $delay: 0s) {
  animation-name: $name;
  animation-duration: $duration;
  animation-timing-function: $timing;
  animation-delay: $delay;
  animation-fill-mode: both;
}

// Usage
.element {
  @include animate(fadeIn, 500ms, ease-out);
}

Animation Library

Professional Animation Library
// _animations.scss

// ========================================
// Fade Animations
// ========================================

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// ========================================
// Slide Animations
// ========================================

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

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

// ========================================
// Scale Animations
// ========================================

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}

// ========================================
// Rotate Animations
// ========================================

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

// ========================================
// Bounce Animations
// ========================================

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

// ========================================
// Attention Seekers
// ========================================

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14%, 42% {
    transform: scale(1.3);
  }
  28%, 70% {
    transform: scale(1.0);
  }
}

// ========================================
// Loading Animations
// ========================================

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow:
      0.25em 0 0 rgba(0, 0, 0, 0),
      0.5em 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: black;
    text-shadow:
      0.25em 0 0 rgba(0, 0, 0, 0),
      0.5em 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow:
      0.25em 0 0 black,
      0.5em 0 0 rgba(0, 0, 0, 0);
  }
  80%, 100% {
    text-shadow:
      0.25em 0 0 black,
      0.5em 0 0 black;
  }
}

// ========================================
// Utility Classes
// ========================================

// Apply animations
.animate {
  &--fade-in { animation: fadeIn 1s ease; }
  &--fade-out { animation: fadeOut 1s ease; }
  &--fade-in-up { animation: fadeInUp 1s ease; }
  &--fade-in-down { animation: fadeInDown 1s ease; }

  &--slide-in-left { animation: slideInLeft 0.8s ease; }
  &--slide-in-right { animation: slideInRight 0.8s ease; }

  &--zoom-in { animation: zoomIn 0.6s ease; }
  &--zoom-out { animation: zoomOut 0.6s ease; }

  &--bounce { animation: bounce 1s infinite; }
  &--bounce-in { animation: bounceIn 0.8s ease; }

  &--pulse { animation: pulse 2s infinite; }
  &--shake { animation: shake 0.5s ease; }
  &--heartbeat { animation: heartbeat 1.3s infinite; }

  &--spin { animation: spin 1s linear infinite; }
  &--rotate { animation: rotate 2s linear infinite; }
  &--swing { animation: swing 1s ease; }
}

// Animation delays
@for $i from 1 through 5 {
  .animate--delay-#{$i} {
    animation-delay: #{$i * 0.1}s;
  }
}

// Animation speeds
.animate {
  &--fast { animation-duration: 0.3s; }
  &--normal { animation-duration: 1s; }
  &--slow { animation-duration: 2s; }
}

Transform Properties

// Transform Mixin
@mixin transform($transforms...) {
  transform: $transforms;
}

// Examples
.element {
  // Translate
  @include transform(translateX(100px));
  @include transform(translateY(-50px));
  @include transform(translate(50px, -20px));

  // Scale
  @include transform(scale(1.5));
  @include transform(scaleX(2));
  @include transform(scale(1.2, 0.8));

  // Rotate
  @include transform(rotate(45deg));
  @include transform(rotateX(180deg));

  // Multiple transforms
  @include transform(
    translateX(50px)
    rotate(45deg)
    scale(1.2)
  );
}

Transform Origin

.card {
  transform-origin: center center; // default

  &--top-left {
    transform-origin: top left;
  }

  &--bottom {
    transform-origin: bottom;
  }

  &:hover {
    transform: rotateY(180deg);
  }
}

Practical Animation Patterns

Hover Effects

// Lift Effect
.card-lift {
  transition: transform 300ms ease, box-shadow 300ms ease;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
}

// Glow Effect
.button-glow {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transition: left 500ms ease;
  }

  &:hover::before {
    left: 100%;
  }
}

// Scale Effect
.image-zoom {
  overflow: hidden;

  img {
    transition: transform 500ms ease;
  }

  &:hover img {
    transform: scale(1.1);
  }
}

Loading States

// Spinner
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba($primary, 0.3);
  border-top-color: $primary;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

// Skeleton Loading
.skeleton {
  background: linear-gradient(
    90deg,
    $gray-200 25%,
    $gray-300 50%,
    $gray-200 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

// Pulse Dots
.loading-dots {
  &::after {
    content: '...';
    animation: dots 1.5s infinite;
  }
}

Scroll Animations

// Fade in on scroll (with JavaScript)
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;

  &.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

// Parallax Effect
.parallax {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

Performance Optimization

// GPU Acceleration
.optimized-animation {
  // Use transform and opacity for best performance
  transition: transform 300ms ease, opacity 300ms ease;
  will-change: transform, opacity;

  // Avoid animating:
  // - width/height
  // - top/left/right/bottom
  // - margin/padding

  &:hover {
    // ✅ Good: transform
    transform: translateY(-5px);

    // ❌ Bad: top
    // top: -5px;
  }
}

// Reduce Motion for Accessibility
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

📝 Quiz

Welche CSS-Properties sollten für beste Performance animiert werden?

⚡

Tipps & Tricks

Staggered Animations

// SCSS Loop für verzögerte Animationen
@for $i from 1 through 10 {
  .list-item:nth-child(#{$i}) {
    animation-delay: #{$i * 0.1}s;
  }
}

// JavaScript-gesteuert
.stagger-item {
  opacity: 0;
  transform: translateY(20px);

  @for $i from 1 through 20 {
    &:nth-child(#{$i}) {
      transition-delay: #{$i * 50}ms;
    }
  }

  &.animate {
    opacity: 1;
    transform: translateY(0);
  }
}

Animation State Management

// Animation Classes
.is-animating {
  pointer-events: none; // Disable interactions during animation
}

.animation-paused {
  animation-play-state: paused;
}

.animation-running {
  animation-play-state: running;
}

3D Transforms

.card-3d {
  perspective: 1000px;

  &__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }

  &:hover &__inner {
    transform: rotateY(180deg);
  }

  &__front,
  &__back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }

  &__back {
    transform: rotateY(180deg);
  }
}
❌

Häufige Fehler

Fehler 1: Zu viele Properties animieren

❌ SCHLECHT:

.element {
  transition: all 300ms ease; // Animiert ALLES
}

✅ GUT:

.element {
  transition: transform 300ms ease, opacity 300ms ease;
}

Fehler 2: Layout-Thrashing

❌ SCHLECHT:

.card:hover {
  width: 350px; // Verursacht Reflow
  margin-left: -25px; // Verursacht Reflow
}

✅ GUT:

.card:hover {
  transform: scale(1.1); // GPU-beschleunigt
}

Fehler 3: Fehlende will-change

❌ OHNE:

.slider {
  transform: translateX(0);
  transition: transform 300ms;
}

✅ MIT:

.slider {
  transform: translateX(0);
  transition: transform 300ms;
  will-change: transform; // Browser-Hint für Optimierung
}

Fehler 4: Animation-Fill-Mode vergessen

❌ PROBLEM:

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.element {
  animation: slideIn 500ms; // Springt nach Animation zurück
}

✅ LÖSUNG:

.element {
  animation: slideIn 500ms forwards; // Bleibt am Ende-State
}
🎯

Zusammenfassung

Du hast gelernt:

  • ✅ CSS Transitions für Property-Änderungen
  • ✅ @keyframes für komplexe Animationen
  • ✅ Transform für GPU-beschleunigte Effekte
  • ✅ Animation Library mit SCSS
  • ✅ Performance-Optimierung
  • ✅ Accessibility mit prefers-reduced-motion

Key Takeaways:

  • transform + opacity = beste Performance
  • will-change für Browser-Optimierung
  • animation-fill-mode für End-States
  • prefers-reduced-motion für Accessibility
  • Staggered Animations für Dynamik
  • Avoid width/height/margin/padding animations

Animation Properties:

// Transitions
transition: property duration timing-function delay;

// Animations
animation: name duration timing-function delay iteration-count direction fill-mode;

Nächste Schritte

Animations sind perfekt für:

  • Micro-interactions
  • Loading States
  • Page Transitions
  • Scroll Animations
  • Hover Effects
  • Toast Notifications

Viel Erfolg mit deinen Animationen! ✨

← SCSS/SASS•Lektion 13 von 13
100% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "SCSS Animations - CSS Animations & Transitions" abgeschlossen

Vorherige Lektion
SCSS Dark Mode - Theme Switching
Modul abgeschlossen!
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

SCSS Dark Mode - Theme Switching

Implementiere professionelles Dark Mode Theming mit SCSS. CSS Variables, prefers-color-scheme und Theme Toggle.

Expertescss

SCSS Best Practices - Professioneller Workflow

Lerne die wichtigsten Best Practices für wartbaren, performanten SCSS Code. Do's and Don'ts für Production.

Fortgeschrittenscss

SCSS Control Directives - Logik im Stylesheet

Lerne @if, @for, @each und @while für dynamische Styles und Design Systems.

Fortgeschrittenscss
Zurück zu SCSS/SASS