CSS3 Animation Scrolling

CSS3 Animation scroll

In web design, scrolling animation is a common effect that allows page content to dynamically scroll on the screen, attracting user attention and improving the user experience. CSS3 Animation is a new feature in CSS3 that can achieve various animation effects, including scrolling.

Basic Concepts

In CSS3, we can define animation effects using the @keyframes rule. The @keyframes rule is used to create animation sequences. The styles defined in this rule will gradually change according to the animation’s keyframes.

@keyframes scroll { 
from { 
transform: translateY(0); 
} 
to { 
transform: translateY(-100%); 
} 
} 

The above code defines an animation sequence called “scroll” that moves from its original position to the 100% position on the Y axis.

By applying defined keyframes to an element, we can achieve animation effects.

.element { 
animation: scroll 5s linear infinite; 
} 

The above code applies the “scroll” animation sequence to the element named “.element” with an animation duration of 5 seconds, a linear easing function, and an infinite loop.

Horizontal Scrolling

To achieve horizontal scrolling, simply apply the animation effect to the X axis.

@keyframes scroll-horizontal { 
from { 
transform: translateX(0); 
} 
to { 
transform: translateX(-100%); 
} 
} 

.element-horizontal { 
animation: scroll-horizontal 5s linear infinite; 
} 

Vertical Scrolling

Sometimes we want page content to scroll infinitely in the vertical direction. This can be achieved by setting up multiple screens of content.

First, we need a container to wrap the content and set “overflow: hidden;” to hide the part that exceeds the container.

<div class="wrapper"> 
<div class="content">Your content here</div> 
</div> 

Next, set the content element’s height to 100% and use @media queries to replicate the content, creating a circular scrolling effect.

.wrapper { 
overflow: hidden; 
height: 100px; /* container height */ 
} 

.content { 
height: 100%; 
animation: scroll-vertical 5s linear infinite; 
} 

@keyframes scroll-vertical { 
0% { 
transform: translateY(0); 
} 

100% { 
transform: translateY(-100%); 
} 
} 

Controlling Scroll Speed

You can control scroll speed by adjusting the animation duration and easing function.

.element {
animation: scroll 2s ease-in-out infinite;
}

Responsive Design

To ensure scrolling works properly on different devices, we can use @media queries to adjust styles based on screen size.

@media screen and (max-width: 768px) {
.element {
animation: none;
}
}

Summary

CSS3 Animation provides a rich set of animation effects, making it easy to implement scrolling and other animation effects. By flexibly utilizing keyframes and style attributes, we can create a variety of cool scrolling effects and enhance the interactive experience of web pages.