@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

Employing jQuery with dynamic content within this context

Can anyone help me with jQuery and dynamic content? I'm trying to prepend items to a list and show the contents of a specific item when clicked, but all items' content is being displayed instead. I attempted using (this) without success. $(docum ...

javascriptjquery

What is the best way to utilize the Material UI theme provider in a React application that includes a mix of class components and functional components?

I have been working on a React app that utilizes class components, but I have been transitioning to using functional components instead. I have replaced some class components with functional ones in the application. However, I have encountered an issue whe ...

javascriptreactjsmaterial-ui

Leveraging AJAX to transmit a JavaScript variable to PHP within the same webpage

I have a webpage where I want to update a PHP variable based on the value of a name attribute when a user clicks on a link. Here is an example of what I am attempting to accomplish: // PHP <?php $jsVar = $_POST['jsVar']; echo $jsVar; ...

javascriptphpjqueryajax

Shifting Transition for Customer Reviews

I am working on implementing a testimonial slider on my webpage located at . I am trying to make it automatically slide by itself, but have been unsuccessful so far. I would appreciate if you could visit the demo page on my website and help identify what ...

jqueryhtmlcss

Icon: When clicked, initiate a search action

I am looking to make the icon clickable so that it can be used as an alternative to pressing the "return key" for searching. Check out this bootply example at . You simply need to click on the magnifying glass icon and it will initiate the search. ...

javascripthtmltwitter-bootstrap

What is the best way to modify React state?

Can someone help me troubleshoot an issue with toggling React state after a button click? I want to be able to change "Work From Office" to "Work From Home" and vice versa, but it's only working once. Is there a way to achieve this using an if stateme ...

htmlcssreactjs

I'm currently utilizing the react mui package, specifically @mui/x-date-pickers. Could someone kindly provide guidance on how to customize the color of the

I am currently working with MUI in React and using the DatePicker component from the @mui/x-date-pickers library. The version I am using is 6.0.3. I have encountered an issue where, upon selecting the first day, the specified color changes as shown in the ...

cssreactjsmaterial-uidatepicker

Utilize Vue.js and express.js to distribute HTML files securely

Currently, my tech stack includes Vue.js for the frontend and Express.js for the backend. When I kick off the express.js server using npm start, my goal is to serve the Vue frontend component. By utilizing the Vue generator and Express generator, I attemp ...

javascripthtmlnode.jsexpressvue.js

What is the correct way to establish an array variable containing objects?

What is the correct way to declare an object within an array variable? I encountered the following error message: "TypeError: Cannot set property 'name' of undefined" Here is the code snippet in question: let data = [] data[0].name = "john" ...

javascript

Tips for transferring an entire array to a servlet and retrieving it efficiently

I have been attempting to collect all jqgrid data into one array and send it to a servlet. So far, I have tried the following code snippet: var rows= jQuery("#list").jqGrid('getRowData'); var paras=new Arr ...

javascriptjqueryajaxservletsjqgrid

Can you explain the process that takes place when require("http").Server() is called with an Express application passed in as a parameter?

As I was exploring the Socket.io Chat Demo found at this link: http://socket.io/get-started/chat/, I came across their require statements which left me feeling confused. var app = require('express')(); var http = require('http').Server ...

javascriptnode.jsexpress

Setting up a personalized JSPM registry configuration

I have chosen to use Verdaccio as the platform for hosting a private package. In my current project, I am looking to incorporate this package locally. The package has been successfully published and is now hosted on Verdaccio running on localhost (http://l ...

javascriptnode.jsnpmjspm

Matching utility types and themes in Tailwind CSS

I encountered an issue while trying to implement the Tailwind plugin in my project. It seems that a TypeScript error has occurred. I'm curious about the data types of matchUtilities and themes. Can someone provide some insight? const plugin = require( ...

javascriptcsstypescripttailwind-css

The Material UI Checkbox is displaying duplicate values within a single instance

Using React and Material UI checkbox I want the checkbox to update a specific value in the state when it's checked. While everything seems to be working fine, I've noticed that on the first 2 clicks of the checkbox the state doesn't update ...

javascriptreactjsmaterial-uistate

What causes a fixed position div to extend beyond the boundaries of the main container?

Below is the CSS for the fixed div: .top-container { position: fixed; width: 100%; z-index: 999; } Upon zooming out the screen, the div causes the main container to break on the right side while the left side remains unchanged. Refer to the screenshot be ...

css

Looking to modify the styling of links in an unordered list?

Let me explain what I attempted to accomplish CSS: li:nth-child(2n) { background-color:gray; } HTML: <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> ...

htmlcss

The map function is mistakenly returning double the amount of the object it should be returning

My program is fetching data from an API, but when I try to map the array for interesting data, it downloads the same object multiple times. For the first search, it downloads the object twice and for subsequent searches, it downloads the object six times. ...

javascriptreactjsreact-hooks

Setting a value in a numeric input field - a step-by-step guide

I need to assign specific values to each number in a number input field. For instance, number 1 should be equal to 0.125, number 2 should be 0.250, number 3 should be 0.375, and so forth. Here's the code snippet: <input type="number" min="0" max=" ...

phphtml

Issue with JQuery delay functionality not activating correctly upon clicking an <a> tag

When I click on an <a> tag, I want to display a div and wait for 10 seconds before redirecting. However, the div is currently being shown immediately without waiting. Here is the HTML code: <a class="clickHereToDisplay" href="http://www.google.c ...

javascriptjqueryhtmldelay

Expand the data retrieved from the database in node.js to include additional fields, not just the id

When creating a login using the code provided, only the user's ID is returned. The challenge now is how to retrieve another field from the database. I specifically require the "header" field from the database. Within the onSubmit function of the for ...

javascriptnode.jsangulardatabasetypescript