animated text scroller with keyframes

I've successfully implemented a slider with three items, and it's working as expected.

If you'd like to see a live demo, check out this working demo.

This text slider features three items:

HTML

<span class="item-1">FAST.</span>
<span class="item-2">SIMPLE.</span>
<span class="item-3">PERSONAL.</span>

CSS

body {
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1,
.item-2,
.item-3 {
  position: absolute;
  display: block;
  top: 2em;
  width: 60%;
  font-size: 2em;
  animation-duration: 20s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.item-1 {
  animation-name: anim-1;
}

.item-2 {
  animation-name: anim-2;
}

.item-3 {
  animation-name: anim-3;
}

@keyframes anim-1 {
  0%, 8.3% {
    top: -100%;
    opacity: 0;
  }
  8.3%, 25% {
    top: 25%;
    opacity: 1;
  }
  33.33%, 100% {
    top: 110%;
    opacity: 0;
  }
}

@keyframes anim-2 {
  0%, 33.33% {
    top: -100%;
    opacity: 0;
  }
  41.63%, 58.29%  {
    top: 25%;
    opacity: 1;
  }
  66.66%, 100% {
    top: 110%;
    opacity: 0;
  }
}

@keyframes anim-3 {
  0%, 66.66% {
    top: -100%;
    opacity: 0;
  }
  74.96%, 91.62% {
    top: 25%;
    opacity: 1;
  }
  100% {
    top: 110%;
    opacity: 0;
  }
}

Now, I want to add two more items to the slider:

HTML

<span class="item-1">FAST.</span>
<span class="item-2">SIMPLE.</span>
<span class="item-3">PERSONAL.</span>
<span class="item-4">SOCIAL.</span>
<span class="item-5">LOUD.</span>

CSS

body {
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1,
.item-2,
.item-3,
.item-4,
.item-5 {
  position: absolute;
  display: block;
  top: 2em;
  width: 60%;
  font-size: 2em;
  animation-duration: 20s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.item-1 {
  animation-name: anim-1;
}

.item-2 {
  animation-name: anim-2;
}

.item-3 {
  animation-name: anim-3;
}

.item-4 {
  animation-name: anim-4;
}

.item-5 {
  animation-name: anim-5;
}

@keyframes anim-1 {
  0%, 6.3% {
    top: -100%;
    opacity: 0;
  }
  6.3%, 25% {
    top: 25%;
    opacity: 1;
  }
  13.33%, 100% {
    top: 110%;
    opacity: 0;
  }
}

@keyframes anim-2 {
  0%, 23.33% {
    top: -100%;
    opacity: 0;
  }

  31.63%, 48.29% {
    top: 25%;
    opacity: 1;
  }

  56.66%, 100% {
    top: 110%;
    opacity: 0;
  }

}

@keyframes anim-3 {
  0%, 56.66% {
    top: -100%;
    opacity: 0;
  }
  64.96%, 71.62% {
    top: 25%;
    opacity: 1;
  }
  100% {
    top: 110%;
    opacity: 0;
  }
}

@keyframes anim-4 {
  0%, 71.66% {
    top: -100%;
    opacity: 0;
  }
  84.96%, 91.62% {
    top: 25%;
    opacity: 1;
  }
  100% {
    top: 110%;
    opacity: 0;
  }
}

@keyframes anim-5 {
  0%, 84.96% {
    top: -100%;
    opacity: 0;
  }

  94.96%, 91.62% {
    top: 25%;
    opacity: 1;
  }

  100% {
    top: 110%;
    opacity: 0;
  }
}

To view the demo with five items, click on this link: not working demo

Any suggestions on what changes need to be made in my code?

htmlcsscss-animations

Answer №1

The issue stems from incorrect percentage values in the five different animations.

Instead of using separate animations, consider utilizing a single animation like this:

@keyframes anim {
  0%, 33.33% {
    top: -100%;
    opacity: 0;
  }
  33.33%, 50% {
    top: 25%;
    opacity: 1;
  }
  50%, 100% {
    top: 110%;
    opacity: 0;
  }
}

Then, add an animation-delay to each span, for example:

.item-1 { animation-delay: 0s }
.item-2 { animation-delay: 4s }
.item-3 { animation-delay: 8s }
.item-4{ animation-delay: 12s }
.item-5{ animation-delay: 16s }

Check out this working example.

Remember, it's better for performance to animate transform and opacity values rather than the top property whenever possible.

Answer №2

body {
  font-family: 'Roboto', sans-serif;
  color: #f0f0f0;
  background: #333;
  overflow: hidden;
}

.item-1,
.item-2,
.item-3,
.item-4,
.item-5{
  position: absolute;
  display: block;
  top: -100%;
  width: 60%;
  opacity: 0;
  font-size: 2em;
  animation-duration: 15s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: animate-all;
}

.item-1 { animation-delay: 0s }
.item-2 { animation-delay: 3s }
.item-3 { animation-delay: 6s }
.item-4{ animation-delay: 9s }
.item-5{ animation-delay: 12s }

@keyframes animate-all {
  0%, 33.33% {
    top: -100%;
    opacity: 0;
  }
  33.33%, 50% {
    top: 25%;
    opacity: 1;
  }
  50%, 100% {
        top: 110%;
    opacity: 0;
  }
}
<body>
<span class="item-1">QUICK.</span>
<span class="item-2">EFFICIENT.</span>
<span class="item-3">PERSONALIZED.</span>
<span class="item-4">CONNECTED.</span> 
<span class="item-5">DYNAMIC.</span>
</body>

body {
  font-family: 'Roboto', sans-serif;
  color: #f0f0f0;
  background: #333;
  overflow: hidden;
}

.item-1,
.item-2,
.item-3,
.item-4,
.item-5{
  position: absolute;
  display: block;
  top: -100%;
  width: 60%;
  opacity: 0;
  font-size: 2em;
  animation-duration: 20s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: animate-all;
}

.item-1 { animation-delay: 0s }
.item-2 { animation-delay: 4.25s }
.item-3 { animation-delay: 8.50s }
.item-4{ animation-delay: 12.75s }
.item-5{ animation-delay: 17s }

@keyframes animate-all {
  0%, 33.33% {
    top: -100%;
    opacity: 0;
  }
  33.33%, 50% {
    top: 25%;
    opacity: 1;
  }
  50%, 100% {
    top: 110%;
    opacity: 0;
  }
}
<body>
<span class="item-1">QUICK.</span>
<span class="item-2">EFFICIENT.</span>
<span class="item-3">PERSONALIZED.</span>
<span class="item-4">CONNECTED.</span> 
<span class="item-5">DYNAMIC.</span>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The resizing of the window does not occur when a scrollbar is automatically added in IE11

I encountered an issue with my Angular project where the view resizes properly in Chrome and Firefox, but not in IE 11. When the scrollbar appears, some components get covered by the scrollbar. Here is the CSS for the menu: #menu-principal .navbar-lower ...

cssangularjshtml

Display the remainder of an image's height within a div container

Here is the code snippet I am working with: HTML: <div id="mapWrapper" style="height: 624px;"> <div class="box" id="map"> <h1>Campus</h1> <p>Description Campus Map.</p> <img src="abc.png" ...

htmlcss

What is the best way to align certain items to the left and others to the right in a Bootstrap nav bar

Just started studying bootstrap as a beginner yesterday. In this example home, link, more, and options are displayed on the left side. I tried using the "class pull-right" to position the "home" at the top right corner of the screen, but it's not work ...

jqueryhtmlcsstwitter-bootstrap

The login form is not being recognized by Chrome

I've been working on creating a login form for my website. Oddly enough, when I try to use it on Chrome, it doesn't prompt me to save my password. Yet, it functions properly on other browsers like Edge, Firefox, and Internet Explorer. Here' ...

phphtmlformsgoogle-chromeauthentication

Switch up the image automatically after a short amount of time

Hello, I am a beginner in javascript and I have a question. Is it possible for javascript to automatically change an image after a few seconds? This is for my college project and it's quite messy. Below is the code snippet I am working with: <!DOC ...

javascripthtml

Personalized CSS designs within the <option> element in an expanded <select> menu

Are there alternative methods for customizing an expanded select list using HTML or a jQuery plugin? I am interested in rendering each option in the list with multiple styles, similar to this example where the number is displayed in red: <select size=" ...

jqueryhtmlcssdrop-down-menuitemscontrol

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened. To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to ...

javascripthtmlcssbootstrap-5accordion

The CSS file is not appearing, causing the styling not to be applied

I've included the following line in my html file: <link rel="stylesheet" href="css/styles.css"> Despite having the css file linked, the styling is not visible on the page. The HTML remains plain. The structure of my files is as follows: file ...

htmlcss

Issue with VueJS components not functioning as expected with routes

I've encountered an issue when using the component tag with an id of #app within the template of my components/App.vue file. Whenever I include this setup, I receive the following errors: // components/App.vue <template> <div id="app"> ...

javascripthtmlvue.jsvue-router

Adjusting the widths of <input> and <select> elements

I am facing an issue with aligning an input text box under a select element, where the input is intended to add new items to the select. I want both elements to have the same width, but my attempts have not been successful (as I do not wish to specify diff ...

htmlcss

Two rows of images with a horizontal scroll bar

Looking to create a grid of images where each image is displayed side by side. The goal is to have a fixed width and height for the container, with a horizontal scrollbar appearing if there are 12 or more images in the grid. Additionally, any overflow imag ...

css

What methods can I use to eliminate the gap between a div and the page?

<!DOCTYPE html> <html> <head> <title>Functions</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1"> </head> main ...

htmlcss

What is the reason behind my Canvas loading only after I save the new code?

I'm currently facing an issue with loading an image into my canvas. The strange thing is, when I load the page, the image doesn't appear, even though the image src is logging correctly in the console. However, if I save my code and trigger a refr ...

javascripthtmlreactjs

The fix for the unresponsive fixed container in Angular 2 Material

I've encountered an issue with CSS and Angular 2 material. Any element with a fixed position doesn't behave as expected inside an md-sidenav-container. However, when it is placed outside the container, it works perfectly. I have created a Plunker ...

cssangularangular-material

Equation for determining the dimensions (in relation to the parent) of a container with translateZ positioned within a parent container with perspective

How can the widths/heights of child elements with translateZ be calculated within a parent container that has a specified perspective value (keyword: "parallax") in relation to its parents width/height? I am working on a website design that incorporates a ...

csssassparallaxcss-transforms

Need help modifying a UseStatus to target an axios post response efficiently?

Hey there, back again with a head-scratcher I've been dealing with all day. Almost done with a contact form, just stuck on an animation concept that involves three steps: 1. Prompting the user to contact 2. Making the waiting process user-friendly ...

javascriptcssreactjsaxiosuse-state

Creating a webpage header with Javascript to mimic an existing design

I am in the process of building a website with 5 different pages, but I want the header to remain consistent across all pages. To achieve this, I plan to use an external JavaScript file (.js). The header includes the website name (displayed as an image) an ...

javascripthtml

Images with fadeIn-Out effect on a slide restrict the movement of the div

I am currently working on a project where I have a div named "background" containing 4 images (400x300px) that fade in and out in a row every x seconds. The issue I am facing is that these images are displaying on the top-left of the browser, and I am tr ...

javascriptjquerycss

I am attempting to insert the following script to display a list of products, but after adding it, the menu bar seems to be malfunctioning

Can you help with an issue regarding the menu bar's functionality? The code snippet below is meant to list some elements but seems to be causing problems with the menu bar. <script type="text/javascript" src="http://code.jquery.com/jquery- ...

javascripthtml

JavaScript event triggered upon full completion of page rendering

Similar Question: How can I execute a JavaScript function after the page has fully rendered? I am aware that the onload() event can be utilized to perform actions once the page is completely loaded. Is there an equivalent event that signifies when the ...

javascripthtml