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

Q: How do I use the Slide Left animation?

Copy the @keyframes slide-left 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 Left?

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 Left 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 Left is a slide CSS keyframe animation with 0 keyframe steps ().

Slide animations move the element along one edge of its container and back or beyond it. They are simple building blocks for sliding highlights, tabs and underlines.

Animation shorthand

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

@keyframes code

@keyframes slide-left {
}

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 Left animation?

Copy the @keyframes slide-left 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 Left?

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 Left 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 Left 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.