Slide with css animation

 
This is slide 1
 
Slide 1 
It has a link. 
 
This is the second slide
 
Second slide
 
This is slide number 3
 
Slide number 3
 

You can give each slide a style (for these example I just made them green and gave them a green border). Although depending on the method used to animate the slides, there may be some restrictions on what styles you can use.

Method 1 – visibility

One obvious choice for a property to animate is ‘visibility’: You set the visibility to visible for the slide to show and to hidden for all others. To make sure all slides are shown in the same place, you can use the ‘position’ property.

Because the slides are positioned with absolute positioning, if you have some content after the slides, you need to know how much space to reserve. In this case, I know that the largest slide is almost 10em high, so I set the slide set container to 10em. The container also needs ‘position: relative’, so I can position the slides relative to it:

Each slide (i.e., each child of the slide set container) is initially invisible and is positioned in the top left corner of the container. Each slide has a reference to the animation called ‘autoplay1’, which I will define below. I also set the slideshow to last 12 seconds and repeat an infinite number of times. (You can put 1 for a slide show that does not repeat.)

The animation consists of changing the value of ‘visibility’. At the start of the animation, the value is set to ‘visible’. Since I have three slides, a slide should remain visible for one third of the time and invisible for two thirds, so at 33% into the animation I change the value to ‘hidden’ again. These rules are grouped in an ‘@keyframes’ rule, like this:

But like this, all three slides animate together and become visible at the same time. I need to stagger the times at which each slide’s animation starts. The ‘animation-delay’ property is designed for that:

#slideset1 > *:nth-child(1) #slideset1 > *:nth-child(2) #slideset1 > *:nth-child(3)

This is slide 1

This is the second slide

This is slide number 3

Method 2 – top

In the previous example, the slides were absolutely positioned inside the container and made transparent. One other way to hide them is to position them outside the container and tell the container to hide content outside itself with ‘overflow: hidden’.

In fact, if you move the slides in and out of the container, you can also animate that movement, so you see each slide shift in or out: a nice transition affect. That’s what I did in the example below.

The rule for the container element is almost the same as before, with the addition of ‘overflow: hidden’, so any slides positioned outside the container are not shown:

Each slide is initially positioned just below the bottom left corner. (‘100%’ means 100% of the height of the container.) And each slide has an animation called ‘autoplay2’, defined below, to change its position over time:

The ‘ease-in-out’ determines the acceleration of the movement. It is one of a predefined set of keywords. ‘Ease-in-out’ means that the movement starts slowly, accelerates, and finally slows down again. Which is what looks best for our purpose.

The animation moves the slide from below the bottom of the container to the top in half a second (4% of 12 seconds). The position remains unchanged until one third into the animation. Then the slide moves up in half a second again until it is completely above the container. It remains there until the animation starts over:

@keyframes autoplay2 < 0% 4% 33.33% 37.33% 100% >

As before, each of the three slides has to start the animation at a different time:

#slideset2 > *:nth-child(1) #slideset2 > *:nth-child(2) #slideset2 > *:nth-child(3)

And here is the result. Note that the first slide isn’t visible before the animation starts.

This is slide 1

This is the second slide

This is slide number 3

Method 3 – margin-top

The third method animates the ‘margin-top’ property of the first slide to move the slide into view, then move it up to let the second slide appear, and then up even more to let the following slides move into view.

Only one property of one slide needs to be animated. The other slides are laid out below the first in the normal way and move up when the first one moves up. All the slides need to have the same height, which is also the height of the container DIV. That container has ‘overflow: hidden’ so that the slides that are above or below it remain invisible.

As before, I set the height of the container to 10em and also set the height of each slide to the same value (‘100%’). The slides must not have margins; and nothing, including the border or padding, must extend beyond those 10em:

The first slide gets an animation that moves it in half a second (4% of 12 seconds) from below the container to the top of the container. About a third into the animation, the slide is moved up another 10em, which causes the second slide to be aligned with the container. A third later, the first slide moves up again. And at the end of the animation it moves a final time, causing the third slide to move out of the top of the container. Then the animation starts over.

#slideset3 > *:first-child < animation: 12s autoplay3 infinite ease-in-out>@keyframes autoplay3 < 0% 4% 31% 35% 64% 68% 96% 100% >

This is slide 1

This is the second slide

This is slide number 3

Note that there is a little ‘gap’ in the animation when it starts over. First the slides move out of the top in about half a second and then they move back in from the bottom. So there is a moment when the container is empty of slides. That is unlike the previous method, where the first slide starts moving in when the last slide is still moving out.

Method 4 – height

A way to make an element invisible is also to remove its border and padding and set its height to zero. If its ‘overflow’ property is also set to ‘hidden’, the element is completely invisible.

In this case you do not need to know the maximum height of the slides in advance. The animation just toggles the height between 0 and ‘auto’.

However, if different slides have different heights, if means that any content after the slides moves along with the slides. You can see that happening in the example below. Whether that is an issue or a feature depends on what comes after the slides…

The following rule gives each slide an animation and sets ‘overflow’ to ‘hidden’, so that no contents shows once its height is set to 0.

The animation in this case starts by setting the height to ‘auto’ and adding the desired padding and border. At one third into the animation, the height is set to 0 and the border and padding are removed in a fraction of a second. They remain zero until the end of the animation.

@keyframes autoplay4 < 0% 33.32% 33.33% 100% >

As in earlier methods, the animations of each slide are staggered in time. However, we do not delay their start in this case, because then all slides would be visible until the animations hide them. Instead, we start the animations of the second and third slides immediately, but partway into the animation. The second slide is started two-thirds into the animation (as if it had already done 8 of the 12 seconds). And the third slide is started one-third into the animation.

#slideset4 > *:nth-child(1) #slideset4 > *:nth-child(2) #slideset4 > *:nth-child(3)

Источник

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 👈

Источник