@keyframes shimmering-fade

I'm attempting to create a text animation effect (please see video) but I'm struggling to find the solution!!

Can someone assist me with this? Should I use JavaScript for a better result?

h1.fadeinone { animation: fadeinone 10s;}
h1.fadeintwo { animation: fadeintwo 10s;}
h1.fadeinthree { animation: fadeinthree 10s;}

@keyframes fadeinone {
  0% {
    opacity: 0;
  }
  33% { /* 3s for fade in */
    opacity: 1;
  }

}

@keyframes fadeintwo {
  0% {
    opacity: 0;
  }

  66% { /* 3s for fade in */
    opacity: 1;
  }
}

@keyframes fadeinthree{
  0% {
    opacity: 0;
  }

  100% { /* 3s for fade in */
    opacity: 1;
  }
}

#claim h1 {

font-size: 40px;
line-height:40px; 
margin:0px;
padding:0px;
color:#FFF;
}

#claim {background-color:red;}
<div id="claim">
<h1 class="fadeinone">DESIGN</h1>
<h1 class="fadeintwo">loren ipsum</h1>
<h1 class="fadeinthree">DOLOR SIT</h1>
</div>

javascriptjqueryhtmlcsscss-animations

Answer №1

One way to achieve the desired effect is by utilizing the animation-delay property. This method involves separating each letter of a line into individual elements (such as span) and assigning a specific delay to each element, creating a sequential animation.

By using this technique, you can simplify your CSS code and only need one set of keyframes. The delays determine when each element's animation starts, avoiding the need for multiple animations with varying percentages.

div span
{
  opacity: 0;
  animation-name: fadein;
  animation-duration: 3s;
  animation-fill-mode:forwards;
}

div span:nth-child(1){animation-delay:0s}
div span:nth-child(2){animation-delay:0.2s}
div span:nth-child(3){animation-delay:0.4s}
div span:nth-child(4){animation-delay:0.6s}
div span:nth-child(5){animation-delay:0.8s}
div span:nth-child(6){animation-delay:1s}

@keyframes fadein
{
  0%{opacity: 0}
  100%{opacity:1}
}
<div>
  <span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span>
</div>

To simplify this process even further, consider opting for a Javascript solution. While it may offer a more elegant and flexible approach, keep in mind potential compatibility issues. For straightforward tasks like this, sticking to CSS whenever possible is usually the best course of action.

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

What is the best way to populate a JSP session with a jQuery value?

Here is the code I need help with: <form name="f"> <input class="btn" type="button" onclick="submitForm()" value="OK" id="submitButton" name="submitButton"/> <input type="text" id="browser_version" name="browser_version" /> <br /> ...

javajqueryjsp

Setting up angular-cli project for rc5- Step by step guide

Trying to integrate angular-cli with angular 2 rc5 but facing challenges: The issue of 'Promise' not being found After attempting to install 'npm install -g angular-cli@webpack', typings did not get installed, resulting in WebStorm un ...

javascriptangularnpmangular-clingrx

Is it beneficial to display three.js on a <canvas> rather than a <div>?

I have come across examples in three.js that use: renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } ); This relates to a <canvas></canvas> element. On the contrary, there is another method: rendere ...

javascriptthree.jshtml5-canvasrenderer

Why is the ID not being sent after a successful AJAX call using jQuery?

I'm currently utilizing JQuery to initiate an AJAX call for deleting data from a database based on ID. Here's how it's done: $(".delete").live('click', function(event) { var item = $(this), ...

jqueryajax

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

javascripthtmlcssangular

Stop Ajax requests when there are blank spaces in Typeahead.js

I've been experimenting with typeahead.js and utilizing the BloodHound remote feature to load data. Everything is functioning properly, except that when I input only spaces in the textbox, typeahead still makes an ajax call. I'm wondering if th ...

javascriptjqueryajaxtwitter-bootstraptypeahead.js

How can DataTables (JQuery) filter multiple columns using a text box with data stored in an array?

I've been attempting to create a multi-column filter similar to what's shown on this page () using an array containing all the data (referred to as 'my_array_data'). However, I'm facing issues with displaying those filter text boxe ...

javascriptjquery

One common issue popping up in Webpack logs is the error message "net::ERR_SSL_PROTOCOL_ERROR" caused by a call to sock

Using react on the front-end and .net core 3.1 on the back-end. Running webpack on localhost:8080 for client-side development. Configuring proxyToSpa in Startup.cs: applicationBuilder.UseSpa(spa => { spa.UseProxyTo ...

javascriptreactjswebpack.net-core

Learn how to manipulate data within a MongoDB database schema using Node.js and Mongoose: inserting, saving, and updating records

When inserting data into the MongoDB schema presented below, make sure that Employee name, Project name, and client name can be the same, but the employee ID must be unique. Duplicate entries are not allowed. var StatusSchema = new mongoose.Schema({ ...

javascriptnode.jsmongodbexpressmongoose

Issue with Jquery modal not functioning properly on second attempt

Currently, I am working on developing an application using CodeIgniter. However, I have encountered a problem where the modal window does not open for the second time. Here is a more detailed explanation of the issue: The form (view) in question contains ...

javascriptjqueryajaxcodeignitertwitter-bootstrap

How can I improve my skills in creating efficient Angular routers?

In my Ionic project, I am dealing with an AngularJS routes file that contains a large number of routes, approximately a hundred. The structure is similar to the one provided below. (function() { 'use strict'; angular.module('applicatio ...

javascriptangularjssonarqubeangular-routing

Simple authentication with ExpressJS, integrated with MongoDB and AJAX technology

I'm developing a simple Express login feature where a user can enter an existing username from MongoDB into a prompt: HTML code that is not directly related to the issue: <a href="#home" class="login"><span class="fontawesome-circle">< ...

jqueryajaxmongodbexpress

React infinite scroller - component fails to work when initial items are insufficiently loaded

In my Next.js app, I am dealing with a large firestore database containing many book objects. To filter these books based on keywords in their title, category, author, etc., I have implemented a searchbar. Due to the sheer volume of books, I am utilizing l ...

javascriptreactjsnext.js

What methods can I use to prevent columns from merging into a single column?

I am currently in the process of building a website using Bootstrap 3.1.1. The body tag is set with a min-width of 800px. The information that I want to showcase must be presented in a grid format, specifically resembling the layout of a parking lot. Dis ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Correctly align the div on the screen as the viewport is scrolled

I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align pro ...

javascriptjqueryhtmlcssparallax

Frequently, cypress encounters difficulty accessing the /auth page and struggles to locate the necessary id or class

When trying to navigate to the /auth path and log in with Cypress, I am using the following code: Cypress.Commands.add('login', (email, password) => { cy.get('.auth').find('.login').should(($login) => { expect($log ...

javascriptvue.jscypress

What is the process of adding CSS effects to a button when a keypress activates it?

Do you have a CSS style that transforms the look of a button when clicked on-page? Want to extend this effect to when the button is activated via keyboard? (In essence, browsers allow activating a button by pressing Tab to give it focus and then hitting S ...

javascriptjqueryhtmlcss

Deactivate a function within Bootstrap JavaScript

Is there a way to temporarily disable a function within Bootstrap after a click event? <a href="#"><span class="glyphicon glyphicon-triangle-right" id="btn04" onclick="myfun();"></span></a> Additionally, I am looking for a soluti ...

javascripthtmltwitter-bootstrap

Exploring nested static properties within TypeScript class structures

Check out this piece of code: class Hey { static a: string static b: string static c: string static setABC(a: string, b: string, c: string) { this.a = a this.b = b this.c = c return this } } class A { static prop1: Hey static ...

javascripttypescript

What steps should be taken to empty a table before adding new rows to it?

After conducting thorough research, I am still unable to find a solution to my issue. I have a table that I am populating using JQuery and while it populates properly, I cannot seem to clear it before populating it again. Below is the HTML code: $("#sea ...

jqueryhtmlhtml-table