Name: CSS Animation
Author: Kamalesh Biswas

Core Animation Properties

Essential properties for keyframe animations

01

animation shorthand

Shorthand for all animation properties except animation-play-state and animation-composition.

animation: slide 2s ease-in-out 0s infinite alternate;

animation-name identifier

Specifies the @keyframes rule to apply. Multiple animations can be comma-separated.

animation-name: bounce, fadeIn;

animation-duration time

Length of one animation cycle. 0s means no animation plays.

animation-duration: 300ms;
animation-duration: 2s;

animation-timing-function easing

Controls the acceleration curve. Use cubic-bezier() for custom easing.

animation-timing-function: cubic-bezier(
  0.4, 0, 0.2, 1
);

animation-delay time

Time to wait before starting. Negative values begin immediately, partway through.

animation-delay: 1s;
animation-delay: -500ms;

animation-iteration-count number

How many times the animation repeats. Use infinite for endless loops.

animation-iteration-count: 3;
animation-iteration-count: infinite;

animation-direction keyword

Whether animation plays forwards, backwards, or alternates between both.

animation-direction: normal | reverse | 
  alternate | alternate-reverse;

animation-fill-mode keyword

Styles applied before/after execution. forwards keeps the final state.

animation-fill-mode: none | forwards | 
  backwards | both;

animation-play-state keyword

Pauses or resumes the animation. Useful for hover interactions.

animation-play-state: running | paused;

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

animation-composition keyword

New

How animation values combine with underlying property values.

animation-composition: replace | add | accumulate;

animation-timeline timeline

New

Scroll Progress

Specifies the timeline controlling animation progress.

animation-timeline: scroll();
animation-timeline: view();
animation-timeline: --my-timeline;

animation-range range

New

Shorthand for animation-range-start and animation-range-end.

animation-range: entry 25% cover 50%;

animation-range-start offset

New

Where the animation starts within the timeline.

animation-range-start: entry 20%;
animation-range-start: cover 30%;

animation-range-end offset

New

Where the animation ends within the timeline.

animation-range-end: exit 80%;
animation-range-end: contain 50%;

@keyframes Rule

Defines the animation sequence with waypoints along the timeline.

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

Transitions

Smooth property changes on state updates

02

transition shorthand

Shorthand for property, duration, timing-function, and delay.

transition: all 0.3s ease;
transition: transform 0.2s, opacity 0.4s;

transition-property property

Which properties animate. Only listed properties transition; others change instantly.

transition-property: transform, opacity;

transition-duration time

How long the transition takes. Compare 200ms (snappy) vs 1000ms (slow).

transition-duration: 0.2s;
transition-duration: 500ms;

transition-timing-function easing

Acceleration curve. cubic-bezier() creates spring-like effects.

transition-timing-function: ease-out;
transition-timing-function: cubic-bezier(
  0.34, 1.56, 0.64, 1
);

transition-delay time

Wait time before transition starts. Create staggered effects on children.

transition-delay: 0.5s;

/* Staggered children */
.item:nth-child(1) { transition-delay: 0.1s; }
.item:nth-child(2) { transition-delay: 0.2s; }

transition-behavior keyword

New

JS

Allows transitioning discrete properties like display that cannot be interpolated.

transition-behavior: allow-discrete;

.popup {
  transition: display 0.3s;
  transition-behavior: allow-discrete;
}

Timing Functions

Easing curves and step functions

03

ease

Default value. Slow start, fast middle, slow end.

/* See visual demo */

linear

Constant speed throughout.

/* See visual demo */

ease-in

Slow start, fast end.

/* See visual demo */

ease-out

Fast start, slow end.

/* See visual demo */

ease-in-out

Slow start and end, fast middle.

/* See visual demo */

step-start

Stays at end value, jumps at start.

/* See visual demo */

cubic-bezier()

Custom cubic Bezier curve with 4 numbers: x1, y1, x2, y2.

cubic-bezier(0.4, 0, 0.2, 1)

steps()

Discrete steps instead of smooth interpolation.

steps(5, end)

Scroll-Driven Animations

Link animations to scroll position and element visibility

04

scroll-timeline container

New

Defines a scroll timeline on a container.

.container {
  scroll-timeline: --timeline y;
}

scroll-timeline-name identifier

New

Names the scroll timeline for reference.

scroll-timeline-name: --my-timeline;

scroll-timeline-axis axis

New

Specifies horizontal or vertical scroll.

scroll-timeline-axis: block;
scroll-timeline-axis: inline;
scroll-timeline-axis: x;
scroll-timeline-axis: y;

view-timeline element

New

Timeline based on element visibility in viewport.

.element {
  view-timeline: --reveal block;
}

view-timeline-name identifier

New

JS

Names the view timeline.

view-timeline-name: --reveal;

view-timeline-axis axis

New

Axis for view timeline tracking.

view-timeline-axis: block;
view-timeline-axis: inline;

view-timeline-inset length

New

Adjusts the viewport intersection area.

view-timeline-inset: 20%;
view-timeline-inset: 100px;

timeline-scope identifier

New

Makes timelines available to descendants.

.parent {
  timeline-scope: --t1, --t2;
}

scroll-behavior keyword

Smooth or instant scrolling for navigations.

html {
  scroll-behavior: smooth;
}

scroll-snap-type snap

Enables scroll snapping behavior.

scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;

scroll-snap-align position

Snap position within the container.

scroll-snap-align: center;
scroll-snap-align: start end;

scroll-snap-stop keyword

Whether scroll must stop at this element.

scroll-snap-stop: normal;
scroll-snap-stop: always;

scroll-margin length

Offsets the snap position outward.

scroll-margin: 20px;
scroll-margin-top: 100px;

scroll-padding length

Offsets the snapport inward from container.

.container {
  scroll-padding: 20px;
}

Motion Path

Animate elements along SVG paths

05

offset-path path

Defines the path: path(), circle(), ray(), or url().

offset-path: path('M10,50 Q50,10 90,50');
offset-path: circle(50% at center);
offset-path: ray(45deg closest-side);

offset-distance percentage

Position along the path (0% to 100%).

offset-distance: 50%;
offset-distance: 100px;

offset-position position

Initial position before path offset.

offset-position: auto;
offset-position: center;
offset-position: 100px 50px;

offset-anchor position

Point on element that aligns with path.

offset-anchor: center;
offset-anchor: top left;
offset-anchor: 25% 75%;

offset-rotate angle

→

Orientation of element along path.

offset-rotate: auto;
offset-rotate: auto 90deg;
offset-rotate: 45deg;

Transform & 3D

Spatial transformations and 3D space

06

transform function

Apply 2D or 3D transformations. Multiple functions space-separated.

transform: translateX(50px) rotate(45deg) scale(1.5);
transform: perspective(500px) rotateY(45deg);

translate individual

Individual transform property. Avoids function order issues.

translate: 50px 20px; /* x y */
translate: 50px 20px 10px; /* x y z */

scale individual

Individual scale property.

scale: 1.5; /* uniform */
scale: 1.5 0.8; /* x y */
scale: 1.5 0.8 1.2; /* x y z */

rotate individual

Individual rotation property.

rotate: 45deg;
rotate: 1 0 1 45deg; /* x y z angle */
rotate: z 45deg;

transform-origin position

Pivot point for transforms.

transform-origin: center;
transform-origin: top left;
transform-origin: 25% 75%;

transform-box box

Defines the layout box for transform.

transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;

perspective length

Distance between z=0 and viewer. Smaller = more intense 3D.

.container { perspective: 1000px; }
.element { transform: perspective(500px) rotateY(45deg); }

perspective-origin position

Vanishing point for 3D transforms.

perspective-origin: center;
perspective-origin: top right;
perspective-origin: 25% 75%;

transform-style keyword

Whether children are in 3D space or flattened.

transform-style: preserve-3d;
transform-style: flat;

backface-visibility keyword

Front

Back

Whether back face is visible when turned away.

backface-visibility: hidden; /* For card flips */
backface-visibility: visible;

Effects & Performance

Visual effects and optimization

07

will-change property

Hint browser about upcoming animations. Use sparingly.

will-change: transform, opacity;
will-change: scroll-position;

contain keyword

Isolate element for performance optimizations.

contain: layout;
contain: paint;
contain: strict;

contain-intrinsic-size size

300x200

Explicit size for content-visibility containers.

contain-intrinsic-size: 300px 200px;
contain-intrinsic-width: 300px;

filter effect

Visual effects. Heavy on performance.

filter: blur(5px);
filter: brightness(1.2) contrast(1.1);
filter: hue-rotate(90deg) saturate(2);

clip-path shape

Clip element to a shape. Great for reveals.

clip-path: circle(50% at center);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: inset(10px 20px 30px 40px);

mask-image image

Masks element using image or gradient.

mask-image: url('mask.png');
mask-image: linear-gradient(to right, transparent, black);

mask-size size

Size of the mask layer.

mask-size: cover;
mask-size: contain;
mask-size: 100px 50px;

mask-position position

Position of the mask layer.

mask-position: center;
mask-position: top left;
mask-position: 25% 75%;

shape-outside shape

Defines shape for text to wrap around.

shape-outside: circle(50%);
shape-outside: polygon(0 0, 100% 0, 100% 100%);
shape-outside: url('shape.png');

Commonly Animated Properties

These properties are frequently animated for UI interactions:

Layout

widthheightmarginpaddingtopleftrightbottom

Visual

opacitycolorbackground-colorbackground-positionborder-radiusbox-shadow

Typography

font-sizeletter-spacingline-heightword-spacing

Performance Tip: Prefer animating transform and opacity for 60fps animations. Avoid animating layout properties.

Web Animations API

JavaScript control for CSS animations

08

element.animate() method

JS

Creates a new Animation object on an element.

const animation = element.animate(
  [
    { transform: 'translateX(0)' },
    { transform: 'translateX(100px)' }
  ],
  {
    duration: 1000,
    iterations: Infinity
  }
);

Animation interface

JS

Controls playback of an animation.

animation.play();
animation.pause();
animation.reverse();
animation.cancel();
animation.finish();

// Get current time
console.log(animation.currentTime);

KeyframeEffect constructor

JS

Programmatically create keyframe effects.

const effect = new KeyframeEffect(
  element,
  [
    { opacity: 0, transform: 'scale(0)' },
    { opacity: 1, transform: 'scale(1)' }
  ],
  { duration: 500, fill: 'forwards' }
);

const animation = new Animation(effect);

DocumentTimeline timeline

JS

Timeline linked to document time. Default for all animations.

const timeline = new DocumentTimeline({
  originTime: 0
});

const animation = element.animate(
  keyframes,
  { 
    duration: 1000,
    timeline: timeline 
  }
);