How to create slide in animation css

CssHow-ToBeginner · 3 min read

How to Create Slide In Animation with CSS

To create a slide in animation in CSS, use @keyframes to define the movement from off-screen to the final position, then apply it with the animation property on the element. Adjust properties like transform and opacity inside the keyframes for smooth sliding effects.

📐

Syntax

The slide in animation uses @keyframes to define the start and end states of the element's position. The animation property applies this animation to the element with settings for duration, easing, and fill mode.

@keyframes slideIn: Defines the animation steps.
from and to: Specify the start and end styles.
transform: translateX(): Moves the element horizontally.
animation: slideIn 0.5s ease forwards;: Runs the animation once over 0.5 seconds with easing and keeps the final state.

css

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

.element {
  animation: slideIn 0.5s ease forwards;
}

💻

Example

This example shows a box sliding in from the left side when the page loads. The box starts off-screen and moves smoothly to its visible position with fading in.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Slide In Animation Example</title>
<style>
  @keyframes slideIn {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  .slide-box {
    width: 200px;
    height: 100px;
    background-color: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: 8px;
    animation: slideIn 0.6s ease forwards;
  }
  body {
    display: flex;
    height: 100vh;
    margin: 0;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
  }
</style>
</head>
<body>
  <div class="slide-box">Slide In Box</div>
</body>
</html>

Output

A blue rectangular box with white text 'Slide In Box' smoothly slides in from the left side to the center of a light gray page.

⚠️

Common Pitfalls

Common mistakes when creating slide in animations include:

Not using forwards in animation-fill-mode, causing the element to jump back after animation ends.
Forgetting to set initial off-screen position in from, so the slide effect is not visible.
Using display: none on the element, which prevents animation from running.
Not setting opacity if you want a fade effect along with sliding.

css

/* Wrong: Missing forwards fill mode */
.element {
  animation: slideIn 0.5s ease;
}

/* Right: Keeps final position after animation */
.element {
  animation: slideIn 0.5s ease forwards;
}

📊

Quick Reference

Use these tips for smooth slide in animations:

Define @keyframes with transform: translateX() or translateY() for horizontal or vertical slides.
Use animation-fill-mode: forwards; to keep the element visible after animation.
Adjust animation-duration and animation-timing-function for speed and smoothness.
Combine opacity changes for fade effects.

✅

Key Takeaways

Use @keyframes with transform translateX or translateY to create slide in effects.

Apply animation with forwards fill mode to keep the element visible after sliding.

Set initial off-screen position in the from state for a clear slide effect.

Combine opacity changes for smooth fade and slide animations.

Avoid display:none on animated elements to ensure animations run.