Learn 56 Animation concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
Interpolates a property change between two interface states.
Create a CSS transition for a card state change. List only the properties that should animate, prefer transform and opacity, use a short purposeful duration and suitable easing, preserve visible focus, handle transitionend only when necessary, avoid transition: all, and provide an equivalent reduced-motion state.Defines named intermediate states for a multi-stage animation sequence.
Create a reusable CSS @keyframes animation with clearly named keyframes, explicit duration, easing, delay, iteration count, direction and fill mode. Trigger it intentionally, avoid animating layout-heavy properties, expose completion where behavior depends on it, prevent accidental infinite motion, and include a prefers-reduced-motion alternative.Creates and controls browser-native animation timelines from JavaScript.
Implement an animation with Element.animate using keyframes and an options object. Keep the Animation instance, provide play, pause, reverse and cancel controls, handle finished and cancel states safely, avoid leaking replaced animations, preserve the final application state without relying blindly on fill forwards, and respect prefers-reduced-motion.Schedules frame-based visual updates before the browser repaints.
Create a requestAnimationFrame loop for a time-based visual effect. Calculate progress from timestamps instead of frame counts, clamp elapsed time after inactive tabs, store and cancel the request ID, stop when the effect completes or leaves view, avoid layout thrashing by batching reads before writes, and disable non-essential motion for reduced-motion users.Standardizes animation speed by interaction size and purpose.
Define motion duration design tokens for instant feedback, small component transitions, medium overlays and large page changes. Document the intended use of each token, keep frequent interactions brief, scale duration with distance and complexity, allow a zero or near-zero reduced-motion mode, and avoid arbitrary one-off timing values.Controls how animation velocity changes over its duration.
Design an easing system with purposeful enter, exit, standard and linear curves. Use deceleration for entering elements, acceleration for exits, matched curves for reversible motion, linear timing only for continuous progress, preview the cubic-bezier values, avoid exaggerated overshoot in frequent UI, and preserve clear end states in reduced motion.Waits for a defined interval before motion begins.
Add a deliberate animation delay only where it clarifies sequence or prevents accidental hover activation. Keep direct feedback immediate, make delayed UI cancellable when the pointer or focus leaves, avoid delaying critical status, document negative-delay behavior if used, and remove non-essential waits in reduced-motion mode.Offsets related item animations to reveal order or grouping.
Create a staggered list entrance using one motion pattern and a small capped delay between items. Preserve DOM and reading order, do not block interaction until the last item finishes, limit the total sequence duration for long lists, support dynamic item counts, avoid motion-only meaning, and reveal all items immediately with reduced motion.Models responsive motion with stiffness, damping and mass.
Create a spring-based panel transition with documented stiffness, damping and mass. Keep overshoot subtle, preserve deterministic final layout, allow interruption and reversal without snapping, avoid springs for critical reading or repeated controls, test low-performance devices, and substitute a brief fade when reduced motion is requested.Advances through discrete frames instead of interpolating continuously.
Create a stepped CSS animation for a frame sequence using steps with the correct jump position. Match the step count to the sprite frames, prevent subpixel drift, define iteration and end-frame behavior, offer play and pause controls for looping motion, avoid rapid flashing, and show a static representative frame for reduced motion.Changes opacity to introduce, replace or remove content gently.
Create an accessible fade-in and fade-out transition for secondary content. Keep the DOM, visibility and pointer state synchronized with opacity, avoid focus entering hidden content, use a short duration, announce meaningful state changes separately, support interrupted reversals, and replace the fade with an instant change when reduced motion is preferred.Translates an element from a nearby edge to communicate direction.
Create a slide transition for a contextual panel using transform rather than positional layout properties. Match entry and exit direction to the trigger and dismissal path, keep travel distance modest, synchronize visibility and focus, prevent offscreen horizontal overflow, allow interruption, and use a fade or instant state for reduced motion.Grows or shrinks an element around a meaningful transform origin.
Create a subtle scale-and-opacity transition for a menu originating at its trigger. Set transform-origin to the attachment point, avoid scaling readable text from near zero, keep the final geometry stable, synchronize focus and pointer events, reverse cleanly on close, and remove the scale component for reduced-motion users.Turns an object to express orientation, progress or state change.
Create a restrained rotate transition for a disclosure chevron or refresh icon. Rotate around the correct origin, keep the semantic expanded or busy state authoritative, avoid continuous spinning unless work is actually pending, stop immediately when complete, do not use rotation as the only cue, and provide a static state change under reduced motion.Uncovers content progressively using clipping or masking.
Create a directional reveal using clip-path or a mask without changing document layout. Keep the underlying content available at the correct time, choose direction to reinforce hierarchy, avoid masking focus indicators, fall back cleanly where masking is unsupported, keep the motion brief, and reveal content immediately for reduced-motion users.Animates blur with opacity to shift attention between depth layers.
Create a restrained blur-and-opacity transition between two small visual states. Avoid blurring large page regions or body text, keep contrast readable at endpoints, animate a pseudo-element when possible, test GPU cost, never use blur as the only indication of disabled content, and switch instantly or fade only when reduced motion is requested.Animates disclosure content between compact and revealed states.
Create an accessible expand and collapse animation for disclosure content. Keep the button's aria-expanded and aria-controls synchronized, avoid unreliable height auto interpolation or measure safely, hide collapsed content from focus, support rapid reversal, preserve scroll position, and complete instantly when reduced motion is enabled.Fades outgoing and incoming states across the same visual space.
Create a crossfade between two content views without duplicate announcements or overlapping focus targets. Keep one stable container size, mark only the current state interactive and accessible, coordinate outgoing and incoming opacity, handle interruption and loading errors, preserve the selected state in markup, and use an immediate swap under reduced motion.Combines translation and fading for a noticeable temporary entrance.
Create a fly-in transition for a temporary notification. Move it only a short distance from its anchored edge, preserve a stationary frame of reference, avoid covering focused controls, keep dismissal available throughout motion, pause any timeout on hover and focus, announce the message with an appropriate live region, and use a fade-only reduced-motion variant.Rotates a surface in 3D to reveal a related reverse side.
Create an accessible two-sided card flip triggered by a real button. Keep both sides semantically related, expose only the visible side to focus and assistive technology, define perspective and backface visibility, avoid requiring hover, preserve a non-animated toggle state, and replace 3D rotation with an instant swap or crossfade under reduced motion.Smooths a pointer-hover change without hiding keyboard behavior.
Create a subtle hover transition for a clickable card using color, border and a small transform. Apply equivalent focus-visible feedback, avoid layout shift, keep the hit target stationary, limit hover styles to devices that support hover, preserve contrast in every state, and disable the transform in reduced-motion mode.Acknowledges activation immediately while a control is pressed.
Create immediate press feedback for a button using a very small scale or surface change. Preserve the native active and keyboard behavior, keep the label readable, never delay the action until animation completion, expose aria-pressed only for true toggle buttons, avoid sticky touch states, and use a color or border response when reduced motion is preferred.Makes keyboard focus movement clear without delaying visibility.
Create a focus-visible treatment with an immediately visible high-contrast outline and an optional brief halo transition. Never animate from an invisible focus state, keep the outline outside clipping containers, meet contrast and thickness requirements, avoid motion that follows every keystroke across large distances, and remove the halo animation for reduced motion.Expands a bounded surface response from the activation point.
Create a bounded ripple as supplementary button feedback. Trigger it for pointer and keyboard activation, clip it to the control, remove generated nodes after animation, keep native focus and active styling, do not delay the command, prevent repeated ripples from accumulating, and replace the expanding motion with a static highlight under reduced motion.Briefly nudges an invalid field while preserving a readable error message.
Create a restrained validation shake that supplements, never replaces, an inline error message. Trigger it only after an explicit validation attempt, keep amplitude low and duration short, avoid repeated automatic motion, maintain focus on the invalid field, announce the error through accessible text, and disable the shake for reduced-motion users.Draws or reveals a confirmation symbol after successful completion.
Create a short success checkmark animation after a confirmed operation. Pair it with persistent success text or an appropriate status message, do not show success before the operation commits, keep stroke drawing below flashing thresholds, allow immediate navigation, announce the outcome once, and show the completed static icon when reduced motion is requested.Transforms one familiar icon into another as state changes.
Create an icon morph for a play/pause or menu/close toggle. Keep the button label and pressed or expanded state synchronized, make both endpoint symbols recognizable, avoid relying on the morph alone, preserve a stable hit target, support rapid reversal, and switch icons without interpolation under reduced motion.Smoothly updates a known completion value toward its latest state.
Create an accessible determinate progress bar that animates between real numeric values. Use a native progress element or correct progressbar semantics, update aria-valuenow and visible percentage immediately, avoid fake progress, keep the transition shorter than the work interval, announce meaningful milestones without chatter, and update instantly with reduced motion.Indicates indeterminate work with a compact rotating mark.
Create an indeterminate loading spinner for a short unknown-duration task. Pair it with concise loading text, mark the relevant region busy, avoid blocking unrelated controls, delay its appearance briefly to prevent flicker for instant work, provide cancellation for long tasks, stop and remove it on every completion or error path, and use a static busy symbol under reduced motion.Uses placeholder shapes to preview content structure while loading.
Create a skeleton loading state matching the final content geometry. Treat placeholders as decorative, label the container as loading, prevent layout shift, use a subtle bounded shimmer only when useful, stop animation when the page is hidden or content loads, provide timeout and error states, and show static placeholders for reduced-motion users.Animates between DOM or document views using browser-captured states.
Implement a progressively enhanced View Transition API change between two interface views. Keep navigation and DOM updates working without the API, assign stable view-transition-name values only where needed, avoid duplicate names, preserve focus and history, skip or simplify the transition for reduced motion, and test unsupported browsers and interrupted navigation.Carries one visual element continuously between related views.
Create a shared-element transition from a collection card to its detail view. Match the same logical image or title across states, keep aspect-ratio changes controlled, avoid cloning accessible content into duplicate focus targets, preserve navigation semantics and scroll restoration, provide a non-animated fallback, and disable large spatial motion for reduced-motion users.Introduces a dialog and backdrop while moving focus into a new layer.
Create an accessible modal open and close transition with a restrained backdrop fade and dialog scale or translate. Move focus when the dialog becomes usable, trap and restore focus correctly, synchronize inert background state, support Escape during animation, prevent click-through, and use an immediate or fade-only transition under reduced motion.Slides a navigation or detail surface from a screen edge.
Create an accessible drawer transition from the edge associated with its trigger. Animate with transform, keep the backdrop and focus behavior synchronized, prevent body scroll when modal, support Escape and interrupted reversal, avoid shifting the entire viewport unless intentional, preserve a visible close control, and replace the slide with a fade or instant state for reduced motion.Reveals a small anchored surface close to its invoking control.
Create a subtle popover transition anchored to its trigger using opacity and a tiny scale or translate. Keep placement stable if it flips at viewport edges, expose correct expanded and control relationships, move focus only when the pattern requires it, dismiss safely during animation, preserve pointer targeting, and remove spatial motion under reduced motion.Moves a selection marker between tabs while content changes.
Create an accessible tab indicator transition that moves between selected tabs without delaying the tab-panel update. Keep aria-selected and roving tabindex authoritative, calculate the indicator from real tab geometry, handle resize and wrapping, preserve visible focus, avoid moving the page layout, and switch the indicator instantly for reduced motion.Animates a disclosure panel while maintaining its semantic state.
Create an accessible accordion transition using buttons with aria-expanded and aria-controls. Animate only the panel whose state changes, handle intrinsic height safely, keep collapsed content out of the tab order, support rapid reversal and exclusive or multi-open rules, preserve focus, and complete immediately under reduced motion.Moves between adjacent slides while retaining user control.
Create an accessible carousel transition with previous, next and pause controls. Do not auto-advance by default; if enabled, stop on hover, focus and user request, announce the selected slide without repeating hidden slides, keep controls operable during motion, preserve swipe direction, avoid infinite cloning confusion, and use instant slide changes under reduced motion.Animates layout changes using First, Last, Invert and Play measurements.
Implement a FLIP animation for reordering cards. Measure first and last bounding boxes, invert the visual delta with transforms, play back to identity, use stable item keys, batch DOM reads and writes, preserve focus and semantic order, handle added and removed items, cancel stale animations, and skip the transform under reduced motion.Provides pickup, movement and drop feedback during direct manipulation.
Create drag-and-drop motion for reordering a short list with a dedicated handle and full keyboard alternative. Show picked-up, target and settled states, use transforms to prevent layout thrashing, auto-scroll carefully, announce positions, allow Escape to cancel, persist only after a valid drop, and minimize movement under reduced motion.Introduces content when it enters the viewport.
Create a progressively enhanced scroll reveal using IntersectionObserver. Keep content visible and usable without JavaScript, trigger each section once unless replay is meaningful, avoid hiding content from search or assistive technology, use a small opacity and translate change, stop observing completed items, and reveal everything immediately when reduced motion is preferred.Maps page or container scroll position to a visual progress timeline.
Create a scroll-linked reading progress indicator using a scroll-driven animation where supported and a lightweight fallback otherwise. Keep the value synchronized with the correct scroll container, expose progress text when useful, avoid blocking the main thread, do not move essential content, handle dynamic document height, and show a static or directly updated indicator under reduced motion.Moves layers at different rates to imply depth during scrolling.
Create an optional, restrained parallax effect for a decorative hero layer. Keep foreground content and focus targets stationary, limit travel and peripheral motion, avoid scroll-jacking, maintain performance on touch devices, turn the effect off when the tab or element is not visible, and completely disable parallax for prefers-reduced-motion.Interpolates a displayed numeric value between confirmed states.
Create a number tween for a dashboard metric using requestAnimationFrame and elapsed time. Update the underlying accessible text to the final value without announcing every frame, preserve locale-aware formatting and units, handle decreasing and interrupted values, avoid implying precision not present in the data, and display the final number immediately under reduced motion.Interpolates marks between old and new data states to preserve context.
Create an accessible chart update transition keyed by stable data identifiers. Animate existing marks between old and new values, clearly enter and exit records, keep axes and domains honest, prevent rapid updates from queuing, announce the new summary rather than every frame, provide the underlying data table, and update instantly for reduced-motion users.Reveals a line by animating its dash offset along the path.
Create an SVG path-drawing animation using stroke-dasharray and stroke-dashoffset. Measure or normalize the path length, keep the final illustration visible, do not use drawing order as the only information, prevent rapid flashing, offer replay only when useful, provide an accessible name or mark decorative SVG correctly, and show the completed path under reduced motion.Moves an element along a defined geometric route.
Create a CSS motion-path animation along an SVG or offset path. Align the object intentionally with offset-rotate, keep travel inside a bounded region, avoid large peripheral or camera-like movement, provide play and pause controls for loops, never encode essential sequence only through position, and use a static endpoint or simple fade for reduced motion.Displays discrete frames from one image atlas using stepped positioning.
Create a sprite-sheet animation with exact frame dimensions, background sizing and steps timing. Prevent interpolation between frames, account for device pixel ratio, preload the image, define idle and active states, pause when offscreen or the page is hidden, provide controls for continuous playback, and show a representative static frame under reduced motion.Lets users play, pause, restart and inspect a motion sequence.
Create accessible animation playback controls with Play, Pause and Restart buttons that retain keyboard focus. Keep labels synchronized with the actual animation playState, disable actions that cannot currently run, expose a concise status, support Space and Enter naturally, avoid replacing the focused button node, and initialize paused when motion is not essential.Provides persistent control over motion that starts or updates automatically.
Create automatically moving content that complies with pause, stop and hide requirements. Place a clear control before or beside the motion, pause on user request without trapping focus, remember the preference when appropriate, stop on hover or keyboard focus where reading time matters, avoid auto-start where unnecessary, and do not start motion at all for reduced-motion users.Replaces non-essential spatial movement when the user requests less motion.
Implement a comprehensive prefers-reduced-motion strategy. Remove parallax, large translation, zoom and continuous decorative loops; replace useful transitions with instant state changes or brief opacity changes; keep essential progress understandable; ensure JavaScript animations also read the media query and react to changes; and test every component with both preference values.Changes direction smoothly when the user reverses an action mid-motion.
Create an interruptible open and close animation that reverses from its current progress instead of restarting. Keep one authoritative state machine, use the current timeline time or computed progress, prevent duplicate completion handlers, synchronize aria-expanded and focus at meaningful boundaries, handle rapid repeated input, and finish instantly under reduced motion.Allows playback rate to be slowed, normalized or accelerated.
Create an animation speed control offering at least slow, normal and fast playback. Update Web Animations API playbackRate without restarting the timeline, expose the selected rate in the button label and status, preserve pitch where media is involved, remember the choice when appropriate, include pause, and keep reduced motion as a separate preference rather than merely slow playback.Stops non-visible motion to save processing and battery.
Pause non-essential animations when their component leaves the viewport using IntersectionObserver. Resume only when visible and permitted by user preferences, avoid observing every tiny element independently, disconnect observers during cleanup, preserve timeline position when appropriate, keep live status accurate, and never pause essential background work—only its visual motion.Suspends visual timelines while the document is hidden.
Use the Page Visibility API to pause decorative animation and expensive frame loops while the document is hidden. Resume from a valid current state, clamp elapsed time so values do not jump unexpectedly, keep real-time data logic separate from visual playback, remove event listeners during cleanup, honor an existing user pause, and combine this with reduced-motion handling.Uses compositor-friendly properties for smooth interface motion.
Refactor an interface animation to use transform and opacity where they preserve the intended layout. Avoid repeatedly animating width, height, top or left, measure before writing styles, apply will-change only shortly before motion and remove it afterward, profile rather than assuming GPU promotion is free, keep text sharp, and provide a reduced-motion state.