CSS Animations

WebF provides powerful CSS animation capabilities that enable you to create smooth, performant animations. This guide covers transforms, transitions, keyframe animations, and clip-path with real examples from the WebF showcase.

CSS Transforms

CSS transforms allow you to rotate, scale, skew, and translate elements without triggering layout recalculations.

Translate

Move elements along the X, Y, or Z axis:


/* Horizontal translation */
transform: translateX(20px);
 
/* Vertical translation */
transform: translateY(20px);
 
/* Both X and Y */
transform: translate(10px, 10px);
 
/* Percentage-based (relative to element size) */
transform: translate(50%, -50%);

Scale

Change the size of elements:


/* Uniform scale */
transform: scale(1.2);
 
/* Horizontal scale only */
transform: scaleX(1.5);
 
/* Vertical scale only */
transform: scaleY(0.6);
 
/* Flip horizontally */
transform: scale(-1, 1);

Rotate

Rotate elements in 2D or 3D space:


/* 2D rotation */
transform: rotate(15deg);
transform: rotate(-30deg);
 
/* 3D rotation (Z-axis, same as rotate) */
transform: rotateZ(45deg);

Skew

Distort elements by skewing:


/* Skew horizontally */
transform: skewX(10deg);
 
/* Skew vertically */
transform: skewY(10deg);
 
/* Skew both axes */
transform: skew(10deg, 5deg);

Transform Origin

Control the point around which transforms occur:


/* Default is center */
transform-origin: center;
 
/* Named positions */
transform-origin: top left;
transform-origin: bottom right;
 
/* Used with rotate */
transform: rotate(25deg);
transform-origin: center;
 
transform: rotate(25deg);
transform-origin: top left;
 
transform: rotate(25deg);
transform-origin: bottom right;
 
/* Used with scale */
transform: scale(1.2);
transform-origin: left;

Multiple Transforms (Order Matters!)

Combine multiple transformations - the order you specify them matters:


/* Translate THEN rotate */
transform: translate(40px, 0) rotate(30deg);
 
/* Rotate THEN translate - produces different result! */
transform: rotate(30deg) translate(40px, 0);

Matrix Transform

Advanced: Use matrix for complex transforms:


/* matrix(a, b, c, d, tx, ty) */
transform: matrix(1, 0.2, -0.2, 1, 10, 0);
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);

3D Transforms

Transform elements in 3D space (requires perspective):


/* Container needs perspective */
.container {
  perspective: 600px;
}
 
/* 3D rotations */
.element {
  transform: rotateX(30deg);
  transform: rotateY(30deg);
  transform: translateZ(40px);
}

Combined Transforms

Mix multiple transform functions:


/* Translate + scale + rotate */
transform: translate(10px, 10px) scale(0.9) rotate(10deg);
 
/* Skew + rotate + scale */
transform: skew(8deg, 5deg) rotate(15deg) scale(1.1);

CSS Transitions

Transitions create smooth animations when CSS properties change, typically triggered by state changes or user interaction.

Basic Transition Syntax


/* Syntax: property duration timing-function delay */
transition: transform 0.3s ease-in-out 0s;
 
/* Shorthand for multiple properties */
transition: all 0.3s ease;

Transform and Color Transitions


/* Transform + background-color transition */
.box {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
 
.box:hover {
  transform: translateY(-8px) scale(1.05);
  background-color: #3b82f6;
}
 
/* Opacity transition */
.element {
  transition: opacity 0.5s ease-in-out;
}
 
.element.faded {
  opacity: 0.5;
}
 
/* Color transition on button */
button {
  transition: colors 0.2s;
}
 
button:hover {
  background-color: #ef4444;
}

Timing Functions

Control the animation curve with different easing functions:


/* Linear - constant speed throughout */
transition: transform 0.7s ease-linear;
 
/* Ease-in - slow start */
transition: transform 0.7s ease-in;
 
/* Ease-out - slow end */
transition: transform 0.7s ease-out;
 
/* Ease-in-out - slow start and end */
transition: transform 0.7s ease-in-out;
 
/* Custom cubic-bezier curve */
transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);

Durations and Delays


/* Short duration (150ms) */
transition: transform 0.15s;
 
/* Medium duration (500ms) */
transition: transform 0.5s;
 
/* Long duration (1000ms) */
transition: transform 1s;
 
/* With delay - waits 500ms before animating */
transition: transform 0.7s ease-in-out 0.5s;
transition-delay: 0.5s;

Specific Properties vs All


/* Only animate transform */
transition: transform 0.5s;
 
/* Only animate colors */
transition: colors 0.5s;
 
/* Animate all properties */
transition: all 0.5s;

Width/Height Transitions


/* Width transition */
.bar {
  width: 24px;
  transition: width 0.5s ease-in-out;
}
 
.bar.expanded {
  width: 256px;
}
 
/* Accordion with max-height + opacity */
.panel-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
 
.panel-content.open {
  max-height: 160px;
  opacity: 1;
}

Filter and Shadow Transitions


/* Box-shadow transition */
.card {
  box-shadow: none;
  transition: box-shadow 0.5s;
}
 
.card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

CSS Keyframe Animations

For complex, timeline-based animations with multiple steps, use @keyframes.

Basic Keyframes


/* Simple slide animation */
@keyframes slide {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(60px);
  }
}
 
.element {
  animation: slide 2s ease-in-out infinite;
}
 
/* Linear position animation */
@keyframes slideLinear {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% - 2rem);
  }
}

Transform Animations


/* Spin animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.spinner {
  animation: spin 2s linear infinite;
}
 
/* Pulse animation (scale) */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}
 
.pulse {
  animation: pulse 2s ease-in-out infinite;
}
 
/* Bounce animation (translateY) */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
 
.bounce {
  animation: bounce 1s ease infinite;
}

Fade In Animation


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
 
.fade-in {
  animation: fadeIn 2s ease forwards;
}

Multi-Step Keyframes


/* Color cycle animation */
@keyframes colorCycle {
  0% {
    background-color: #ef4444;
  }
  25% {
    background-color: #f59e0b;
  }
  50% {
    background-color: #10b981;
  }
  75% {
    background-color: #3b82f6;
  }
  100% {
    background-color: #ef4444;
  }
}
 
.color-cycle {
  animation: colorCycle 4s linear infinite;
}
 
/* Shake animation */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}
 
.shake {
  animation: shake 0.5s ease-in-out infinite;
}
 
/* Wobble animation */
@keyframes wobble {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}
 
.wobble {
  animation: wobble 1s ease-in-out infinite;
}
 
/* 3D flip animation */
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
 
.flip {
  animation: flip 2s ease-in-out infinite;
  transform-style: preserve-3d;
}

Animation Properties


.element {
  /* Shorthand: name duration timing-function delay iteration-count direction fill-mode */
  animation: slideIn 0.5s ease-out 0s 1 normal forwards;
 
  /* Individual properties */
  animation-name: slideIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: infinite; /* or a number like 3 */
  animation-direction: normal; /* normal | reverse | alternate | alternate-reverse */
  animation-fill-mode: forwards; /* none | forwards | backwards | both */
  animation-play-state: running; /* running | paused */
}

Animation Iteration Count


/* Infinite loop */
animation: spin 2s linear infinite;
 
/* Run 3 times */
animation: spin 2s linear 3;

Animation Direction


/* Normal - play forward */
animation: slideLinear 2s linear infinite;
 
/* Alternate - reverse on alternate iterations */
animation: slideLinear 2s linear infinite alternate;

Animation Fill Mode


/* Forwards - retain final state */
animation: fadeIn 2s ease forwards;
 
/* Both - apply styles from both first and last keyframe */
animation: fadeIn 2s ease infinite both;

Combined Animations

Apply multiple animations to a single element:


/* Spin + Bounce */
animation: spin 2s linear infinite, bounce 1s ease-in-out infinite;
 
/* Pulse + Rotate */
animation: pulse 2s ease-in-out infinite, spin 4s linear infinite;
 
/* Scale + Color */
animation: pulse 1.5s ease-in-out infinite, colorCycle 4s linear infinite;

CSS Clip-Path

Create custom shapes and clipping effects using clip-path:

Basic Shapes


/* Inset (rectangle with optional rounding) */
clip-path: inset(10px 20px 30px 40px round 10px);
 
/* Circle */
clip-path: circle(50% at 50% 50%);
 
/* Ellipse */
clip-path: ellipse(60% 40% at 50% 50%);

Polygon Shapes


/* Triangle */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 
/* Rhombus (diamond) */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 
/* Star */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
 
/* Trapezoid */
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
 
/* Parallelogram */
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

Clip-Path with Gradients

Clip-path works great with gradient backgrounds:


.clipped-element {
  background: radial-gradient(circle at top left, rgb(255, 53, 26), rgb(0, 235, 235));
  clip-path: circle(50% at 50% 50%);
  width: 150px;
  height: 150px;
}

Practical Animation Examples

Loading Spinner


.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
 
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Notification Badge Pulse


.badge {
  animation: pulse 1.5s ease-in-out infinite;
}


.modal-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
 
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
 
.modal-content {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
 
.modal-overlay.open .modal-content {
  transform: scale(1);
  opacity: 1;
}


.menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}
 
.menu.open {
  transform: translateX(0);
}

Performance Best Practices

GPU-Accelerated Properties

For best performance, animate these properties:


/* ✅ GPU-accelerated (best performance) */
.element {
  transform: translateX(100px);
  transform: scale(1.2);
  transform: rotate(45deg);
  opacity: 0.5;
}
 
/* ❌ Triggers layout (avoid) */
.element {
  left: 100px; /* Avoid animating position properties */
  width: 200px; /* Avoid animating width/height */
  height: 100px;
  top: 50px;
}

Prefer Transform Over Position


/* ✅ Good: Use transform */
.element {
  transform: translateX(100px);
  transition: transform 0.3s ease;
}
 
/* ❌ Avoid: Animating left/top triggers layout */
.element {
  left: 100px;
  transition: left 0.3s ease;
}

Use will-change Sparingly

Hint the browser about animations (use carefully):


/* Use before animating */
.element {
  will-change: transform, opacity;
}
 
/* Remove after animation */
.element.animated {
  will-change: auto;
}

Warning: Don’t use will-change on too many elements or permanently - it uses GPU memory.

Accessibility

Respect Reduced Motion Preference


/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

What’s Supported

WebF supports:

✅ All 2D transforms (translate, rotate, scale, skew, matrix)
✅ 3D transforms (rotateX, rotateY, rotateZ, translateZ, perspective)
✅ CSS transitions with all timing functions
✅ @keyframes animations with all animation properties
✅ clip-path (inset, circle, ellipse, polygon)

What’s Not Supported

Some advanced clip-path shapes
SVG path animations

For a complete list of supported CSS properties, check the CSS Support Reference.

Next Steps

CSS Layout - Master layout techniques
CSS Styling - Colors, backgrounds, and styling
Responsive Design - Build adaptive interfaces