OneTaskBy Tim King · Updated
CSS Slide In Animation Generator
Slide From Left, Right, Top or Bottom
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Slide-In Generator works
A CSS slide in animation moves an element from off to one side into its resting place, usually as the page loads. Pick the direction, distance, easing and delay, choose whether it fades at the same time, press Replay, and copy the keyframes.
Sliding content in gives a page a sense of direction: a heading arriving from the left, a panel rising from below, a notice dropping from the top. Keep the distance modest so the motion feels quick and purposeful rather than theatrical.
How the CSS slide in animation works
The keyframes start the element shifted with transform: translateX() or translateY() and end at
transform: none. Transforms move the element visually without changing the layout around it, so
nothing else on the page jumps. The both fill mode holds the start position during any delay, and
the Overshoot easing lets the element travel slightly past its spot before settling.
Avoiding a sideways scrollbar
An element that starts far off to the right can widen the page for a moment and flash a horizontal
scrollbar. Put overflow-x: clip on the section that holds it if you see that happen.
FAQ
How do I slide in from the left only on desktop?
Wrap the animation rule in a media query such as @media (min-width: 48rem). On phones the
element then simply appears, which is often better because sideways motion on a narrow screen can
feel jumpy.
Should the element fade as it slides?
Usually yes. Without a fade the element is visible at its starting offset for the first frame, which looks like a jump. Turn the fade off only when the element starts fully off screen anyway.
Can I slide an element in when it scrolls into view?
This animation plays once at page load. For content further down the page, use the scroll animation tool, which waits until the element reaches the viewport and offers slide effects too.
What distance looks best?
Between 20 and 100 pixels suits most interface elements. Larger distances work for full-width panels and drawers, but small items travelling a long way look slow even at short durations.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Fade-In Generator
Generate a CSS fade-in animation with delay, easing and blur.
Scroll Animation
Preview scroll reveal effects and copy the CSS or JS.
Logo Reveal
Animate a wordmark reveal and copy the CSS.
Hover Card Builder
Card hover effects with timing controls, previewed live.
Reading Progress Bar
Make a scroll progress bar for articles and copy the CSS and JS.