Slide effect with css

How to make slide animation in CSS

Slide animations can make your page pop — especially when done correctly and in a performant manner. This post will go over various techniques.

Nov 28, 2022 | Read time 7 minutes

🔔 Table of contents

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.

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;

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

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:

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.

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.

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

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.

Browser support

• 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

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

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

101 CSS Sliders

Collection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of May 2020 collection. 5 new items.

Table of Contents

Related Articles

Card Sliders

Author

Links

Made with

About the code

Onboarding Screens

A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.

Information Card Slider

HTML, CSS and JavaScript information card slider.
Made by Andy Tran
November 23, 2015

Elastic Slider

Photo slider working on desktop and mobile browsers.
Made by Taron
September 29, 2014

Comparison (Before/After) Sliders

Author

Links

Made with

About the code

Image Comparison Slider

A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.

Author

Links

Made with

About the code

Javascriptless Before/After Slider

A before and after slider with only html and css.

Author

Links

Made with

About the code

Before After 3 Layer Image Slider

Playing around with a new idea using my two layer before/after image slider. Keeping it minimal. Keeping it vanilla. Like it if it’s useful 🙂

Before After Image Slider (Vanilla JS)

Vanilla JS, minimal, nice to look.
Made by Huw
July 3, 2017

Author

Links

Made with

About the code

Split Screen UI

A «split-screen» slider element with JavaScript.

Before & After Slider Gallery With SVG Masks

A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it’s all SVG, the images and captions scale nicely together. GreenSock’s Draggable and ThrowProps plugins were used for the slider control.
Made by Craig Roblewsky
April 17, 2017

HTML5 Before & After Comparison Slider

Uses customised range input for slider.
Made by Dudley Storey
October 14, 2016

Responsive Image Comparison Slider

Responsive image comparison slider with HTML, CSS and JavaScript.
Made by Ege Görgülü
August 3, 2016

HTML5 Video Before-and-After Comparison Slider

HTML5, CSS3 and JavaScript video before-and-after comparison slider.
Made by Dudley Storey
April 24, 2016

Image Comparison Slider

A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.
Made by CodyHouse
September 15, 2014

Fullscreen Sliders

Author

Links

Made with

About a code

Pure CSS ECommerce Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pure CSS Slider

Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Slider Transition

Nice transition effect for fullscreen slider.

Author

Links

Made with

About the code

Horizontal Parallax Sliding Slider

Horizontal parallax sliding slider with Swiper.js.

Author

Links

Made with

About the code

Smooth 3D Perspective Slider

Responsive smooth 3D perspective slider on mouse move.

Fullscreen Hero Image Slider

Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript.
Made by Tobias Bogliolo
June 25, 2017

Velo.js Slider With Borders

A slider interaction thing using Velocity and Velocity effects (UI Pack) to enhance the animation. Animation is triggered via arrow keys, nav click, or scrolling jack. This version includes borders as part of the interaction.
Made by Stephen Scaff
May 11, 2017

Popout Slider

Simple slider in a minimal style to show off images. Part of the image pops out on each slide.
Made by Nathan Taylor
Jannuary 22, 2017

Responsive Parallax Drag-slider With Transparent Letters

The thing is pretty easy customizable. You can safely change font, font size, font color, animation speed. The first letter of a new string in array in JS will appear on a new slide. Easy to create (or delete) a new slide: 1. Add new city in the array in JS. 2. Change number of slides variable and put a new image in scss list in CSS.
Made by Ruslan Pivovarov
October 8, 2016

Fancy Slider

1. Clip-path for image masking rectangle border (webkit only).
2. Blend-mode for this mask.
3. Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!
4. Cool credits side-menu (click small button in the center of demo).
5. Vanilla js with just

Author

Источник

28 CSS Slideshows

Collection of free HTML and CSS slideshow code: simple, responsive, animated, horizontal, vertical, etc. Update of March 2019 collection. 4 new example.

Table Of Contents

Related Articles

Vertical Slideshows

Author

Links

Made with

About a code

Doggie Screensaver

Pretty hacky attempt at recreating the floating screensaver for the photo gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Slideshow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Slideshow Vanilla JS

Custom slideshow with staggered transitions. Built in vanilla JS.

Author

Links

Made with

About the code

Untitled Slider

A small experiment which quickly turned into something more.

Author

Links

Made with

About the code

Parallax Slideshow

HTML, CSS and JS slideshow with parallax effect.

Split Slick Slideshow

Vertical slideshow in split screen.
Made by Fabio Ottaviani
March 29, 2017

Slideshow Presentation

Navigate using the up and down arrow keys.
Made by Keith Driessen
March 9, 2016

Dual Slideshow

Just playing around with a dual pane slideshow concept.
Made by Jacob Davidson
April 17, 2015

A Pure CSS3 Slideshow

The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath.
Made by Stathis
October 3, 2013

Horizontal Slideshows

Author

Links

Made with

About the code

CSS-only Slideshow

An idea for a page header slideshow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Rotating Background Image Slideshow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Slideshow with HTML/CSS

Slideshow made with HTML/CSS. Any javascript code is used.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Spooky Scary Clip Text

Spooky CSS only image slideshow with text clipping.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Slideshow Concept

A pure CSS and HTML slideshow concept. To add or remove slides: 1. add a new slide template in the HTML; 2. update the $slide-count SCSS variable; 3. tab colours: update the $c-slides SCSS variable 4. slide popout images: update the $b-slides SCSS variable. Use the tabs below to change slide.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Silhouette Zoom Slideshow

Slide show where the person in the current frame is used to zoom into the next frame.

Author

Links

Made with

About the code

Geometrical Birds — Slideshow

83 triangles morphing and changing color into different birds.

Author

Links

Made with

About the code

Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

Author

Links

Made with

About the code

Slideshow Parallax

Slideshow Parallax with TweenMax.js

Split-Screen Slideshow

HTML, CSS and JavaScript split-screen slideshow.
Made by Sean Free
January 9, 2017

Only CSS Slideshow Effect

Ken Burns slideshow effect CSS only.
Made by Dima
December 12, 2016

Slick Slideshow With Blur Effect

Slideshow with blur effect in HTML, CSS and JavaScript.
Made by Fabio Ottaviani
November 11, 2016

CSS Fadeshow

This is an extended version of pure CSS slideshow gallery http://codepen.io/alexerlandsson/pen/RaZdox which comes with more and easier customisation and previous/next buttons.
Made by Alexander Erlandsson
October 24, 2016

Author

Источник