Slide In Right CSS Keyframe Animation – Copy and Paste Code | Frontend Hack

Q: How do I use the Slide In Right animation?

Copy the @keyframes slide-in-right block and the animation shorthand into your stylesheet, then add the class to any element. The shorthand reads name, duration, timing function, delay, iteration count, direction and fill mode.

Q: Can I change the duration or speed of Slide In Right?

Yes. Change the second value in the shorthand, for example 2s for a slower animation, or use the settings above the code to try duration, timing, delay, repeat count, direction and fill mode and copy the updated CSS.

Q: How do I make Slide In Right run only once on page load?

Keep the iteration count at 1 and add the animation class to the element in your HTML. It plays once as soon as the element is rendered; use forwards or both to keep the end state.

Demo

Duration (s) Timing Delay (s) Repeat Direction Fill mode

Open in generator

Slide In Right is a slide in CSS keyframe animation with 0 keyframe steps ().

Slide In animations bring the element into view from one side. They are the standard for drawers, sidebars, toasts and content that enters on scroll.

Animation shorthand

.element {
  animation: slide-in-right 1s ease 0s 1 normal forwards;
}

@keyframes code

@keyframes slide-in-right {
}

HTML

<div class="element">Animated content</div>

Keyframe steps

Step	Styles

Respect reduced motion

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

Frequently Asked Questions

How do I use the Slide In Right animation?

Copy the @keyframes slide-in-right block and the animation shorthand into your stylesheet, then add the class to any element. The shorthand reads name, duration, timing function, delay, iteration count, direction and fill mode.

Can I change the duration or speed of Slide In Right?

Yes. Change the second value in the shorthand, for example 2s for a slower animation, or use the settings above the code to try duration, timing, delay, repeat count, direction and fill mode and copy the updated CSS.

How do I make Slide In Right run only once on page load?

Keep the iteration count at 1 and add the animation class to the element in your HTML. It plays once as soon as the element is rendered; use forwards or both to keep the end state.

Is Slide In Right good for performance?

Yes. It only animates transform and opacity, which browsers can hand to the GPU, so it stays smooth even on mobile devices.