How to make slide animation in CSS

This post will go through a common animation effect - slide animations. This includes slide from left to right, right to left, slide up and down animations.

To make a slide animation, the basic steps are:

1. Create the HTML with a container div and the slider div.
2. In the CSS, set the slider to be offscreen by setting it with a negative left (eg -100px)
3. We then trigger the slide by using transition CSS property and set the left to be 0px;

<div class="wrapper">
    <div id="slide"/>
</div>

#slide {
    position: absolute;
    right: -100px; /* SET THE SLIDER TO BE OFFSCREEN INITIALLY */
    width: 100px;
    height: 100px;
    background: blue;
    transition: 1s;
}

.wrapper:hover #slide {
    transition: 1s;
    right: 0; /* SET THE SLIDER TO BE 0 */
}

Slide up animation

To do a slide up animation, we just need to have the code to set the initial position bottom as negative. When a mouse hovers over the element, we set the bottom to be zero.

#slide {
    position: absolute;
    bottom: -100px; /* SET THE SLIDER TO BE OFFSCREEN INITIALLY */
    width: 100px;
    height: 100px;
    background: blue;
    transition: 1s;
}

.wrapper:hover #slide {
    transition: 1s;
    bottom: 0; /* SET THE SLIDER TO BE 0 */
}

Slide left to right animation

To do a slide left to right animation, we set the starting position of the element to have a negative left property (eg -100px). Then when the user hovers over the element, we change that to zero. This gives the sliding effect.

#slide {
    position: absolute;
    left: -100px; /* SET THE SLIDER TO BE OFFSCREEN INITIALLY */
    width: 100px;
    height: 100px;
    background: blue;
    transition: 1s;
}

.wrapper:hover #slide {
    transition: 1s;
    left: 0; /* SET THE SLIDER TO BE 0 */
}

What is this CSS transition property?

To make simple animations (or element transitions), we can use the transition CSS property. This is a simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function. It comes with the following supporting CSS properties:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Or a shorthand use as follows:

div {
  transition: <property> <duration> <timing-function> <delay>;
}

What about slide in and slide out animation?

To the the slide in (also known as slide entrance) effect, we can use CSS @keyframes to do the job. Additionally we can use the transform3d CSS property. The steps to follow is to:

1. On the starting keyframe (from), we set the position of the element to be 100% of its height on the Y axis.
2. We also need to make it visible
3. At the end keyframe of the animation (to), we set the position to be 0 on the Y axis

CSS will then figure out the keyframes in between.

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

To do the slide out (also known as slide exit) animation effect, we can use the @keyframe property. We just need to define the from to start at 0 on the Y axis, and the to to be transformed to be -100% on the Y axis. We also need to hide the element when the animation finishes.

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  animation-name: slideOutUp;
}

In the above two examples, we use translate3d CSS property. This property just repositions an element in 3d space having the first param as the X axis, second as the Y axis and final as the Z. We use this over the regular translate CSS property due to performance best practice. This will offload processing to the GPU and will help reduce animation jankyness!

What are @keyframes?

The term keyframe comes from video editing and cartoon animation. So if you are familiar with those, then you would have a pretty good idea of the concept. In the old cartoon animation days, you have the lead animator and junior animators. The lead would draw out the keyframes of the animation and then let the junior animations to fill out the gaps.

The same applies for CSS. We define animations with @keyframes and let CSS figure out the gaps in between each @keyframe. So the general layout is as follows

@keyframes animateMe {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

So when would you prefer @keyframes over CSS transition property?

When you need more fine grained control over the animation. For example, if you want to do a slide in for the first 20% of keyframes and then move left to the rest of the animation, this would be more simple to achieve with @keyframes.

More information on CSS animations with Keyframes here: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Browser support

With modern browsers, theres wide support for both the @keyframes and transition property. With the transition property, we need to be careful of the following:

• Not supported on any pseudo-elements besides ::before and ::after for Firefox, Chrome 26+, Opera 16+ and IE10+.
• IE11 does not support CSS transitions on the SVG fill property.
• Transitionable properties with calc() derived values are not supported below and including IE11

When using @keyframes, keep in mind the following support issues:

• !important does not work in @keyframes: Important not working issues and fixes

Summary

In this post we went over common code to do slide animations. This includes slide up, slide left, slide right, slide down. We also allow for slide in (entrance) and slide out (exits) effects.

It is prefered to use keyframes over transition CSS property when you want finer control of the animation. For basic slide animations, transitions should be good enough.

Additionally we should consider browser support. The !important keyword does not work with @keyframes. Transition property has issues with IE and pseudo-elements except ::before and ::after