Delaying the Animation of Multiple Elements with CSS

I have created an SVG of the letter "Z" and I am attempting to use it as a loader on my website. I want to animate the three lines of the "Z" to appear sequentially - first the top line, then the middle line, and finally the bottom line. I have tried to create the animation, but when set to infinite, it doesn't work properly. I also experimented with using the animation-delay property, but it did not give me the desired result.
Here is the code I am currently using:

/* Styling */
*{box-sizing: border-box}html { box-sizing: border-box; font-size: 16px; } *, *:before, *:after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; } ol, ul { list-style: none; } img { max-width: 100%; height: auto; }body{height: 100vh; display: flex; align-items: center}

/* Animation */
.ZLogo{
  margin: 0 auto;
  width: 80px;
  height: 80px;
  padding: 12px 18px; 
}
.topBar,
.bottomBar{
  clip-path: inset(0px 0px 0px 0px);
  animation: topBar 2s infinite;
}
.middleBar{
  clip-path: inset(0px 0px 60px 0px);
  animation: middleBar 2s infinite;
  animation-delay: 1s;
}
.bottomBar{
  clip-path: inset(0px 0px 0px 0px);
  animation: bottomBar 2s infinite;
  animation-delay: 2s;
}

@keyframes topBar {
  0%   {
    clip-path: inset(0px 26px 0px 0px);
  }
  50%  {
    clip-path: inset(0px 0px 0px 0px);
  }
  100% {
    clip-path: inset(0px 26px 0px 0px);
  }
}

@keyframes middleBar {
  0%   {
    clip-path: inset(0px 0px 0px 0px);
  }
  50%  {
    clip-path: inset(0px 0px 60px 0px);
  }
  100% {
    clip-path: inset(0px 0px 0px 0px);
  }
}
@keyframes bottomBar {
  0%   {
    clip-path: inset(0px 26px 0px 0px);
  }
  50%  {
    clip-path: inset(0px 0px 0px 0px);
  }
  100% {
    clip-path: inset(0px 26px 0px 0px);
  }
}
<svg class="ZLogo" xmlns="http://www.w3.org/2000/svg" width="40" height="56" viewBox="0 0 40 56" fill="none">
<path class="topBar" d="M0 8.90909V0H24.3536L17.9448 8.90909H0Z" fill="black"/>
<path class="middleBar" d="M41.0166 7.63636V0H32.0442L0 48.3636V56H8.97238L41.0166 7.63636Z" fill="black"/>
<path class="bottomBar" d="M17.9448 56L24.3536 48.3636H41.0166V56H17.9448Z" fill="black"/>
</svg>

I would appreciate any assistance in getting the animation to work correctly. Thank you for your help!

htmljquerycsssasscss-selectors

Answer №1

The animation's timing can be defined using keyframes:

/* Boilerplate - skip it */
*{box-sizing: border-box}html { box-sizing: border-box; font-size: 16px; } *, *:before, *:after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; } ol, ul { list-style: none; } img { max-width: 100%; height: auto; }body{height: 100vh; display: flex; align-items: center}

/* Actual Code below */
.ZLogo{
  margin: 0 auto;
  width: 80px;
  height: 80px;
  padding: 12px 18px; 
}

.topBar,
.bottomBar {
  clip-path: inset(0px 0px 0px 0px);
  animation: topBar 2s infinite;
}

.middleBar {
  clip-path: inset(0px 0px 60px 0px);
  animation: middleBar 2s infinite;
}

.bottomBar {
  clip-path: inset(0px 26px 0px 0px);
  animation: bottomBar 2s infinite;
}

@keyframes topBar {
  0% {
    clip-path: inset(0px 26px 0px 0px);
  }
  17% {
    clip-path: inset(0px 0px 0px 0px);
  }
  83% {
    clip-path: inset(0px 0px 0px 0px);
  }
  100% {
    clip-path: inset(0px 26px 0px 0px);
  }
}

@keyframes middleBar {
  17% {
    clip-path: inset(0px 0px 60px 0px);
  }
  33% {
    clip-path: inset(0px 0px 0px 0px);
  }
  67% {
    clip-path: inset(0px 0px 0px 0px);
  }
  83% {
    clip-path: inset(0px 0px 60px 0px);
  }
}

@keyframes bottomBar {
  33% {
    clip-path: inset(0px 26px 0px 0px);
  }
  50% {
    clip-path: inset(0px 0px 0px 0px);
  }
  67% {
    clip-path: inset(0px 26px 0px 0px);
  }
}
<svg class="ZLogo" xmlns="http://www.w3.org/2000/svg" width="40" height="56" viewBox="0 0 40 56" fill="none">
<path class="topBar" d="M0 8.90909V0H24.3536L17.9448 8.90909H0Z" fill="black"/>
<path class="middleBar" d="M41.0166 7.63636V0H32.0442L0 48.3636V56H8.97238L41.0166 7.63636Z" fill="black"/>
<path class="bottomBar" d="M17.9448 56L24.3536 48.3636H41.0166V56H17.9448Z" fill="black"/>
</svg>

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 process for integrating three.js code manually into an iframe?

I recently posted a question on Stack Overflow inquiring about how to input code into an iframe without using a file or URL. While I was successful with simple cases like <h1>Hello World</h1>, my ultimate goal is to integrate three.js into thes ...

javascripthtmliframethree.js

"Adjusting the size of a jQuery dialog for optimal viewing on

I am currently working on designing an HTML page that is responsive for both mobile and desktop browsers. One issue I am encountering involves a jQuery dialog that I need to scale properly to fit the page. I believe the problem lies within these lines of ...

jqueryhtmlcss

Include a property in the selected div

jQuery(document).ready(filter); function filter() { jQuery(".my-divs").each(function () { jQuery(".my-divs div").filter(function () { jQuery(this).toggle(jQuery(this).text() <= 3); }); }); jQuery(".my-divs div" ...

javascriptjqueryfiltertoggle

Refresh the page following a database update using asynchronous JavaScript and XML

After sending data to the controller using an ajax request, I need to reload my page. The controller will save the data into the DB and then the reloaded page should display the updated content: [Controller] public class ProcessingController : Controller ...

jquery.netajaxmodel-view-controller

What is the most effective method for showcasing HTML content in a recyclerView?

Within the recyclerView, I showcase comments that are stored in HTML format. My attempt to display the comments in a webView was successful, allowing me to use custom *.css, but it caused significant lag in the recyclerView when scrolling. Additionally, m ...

androidhtmlcssandroid-recyclerviewspannable

I am having issues with my CSS file not functioning correctly on my Django template. Does anyone have any suggestions on how to resolve this issue

I've encountered issues with CSS files not working properly on my Django template. Whenever I make changes to the CSS file and reload the browser page, nothing happens. However, if I restart my computer or power off and on again, the changes reflect o ...

htmlcssdjangobootstrap-4django-staticfiles

python code to locate element using selenium

Currently, I am utilizing selenium in conjunction with Python to automate tasks. I am facing an issue where I have a checkbox element that I need to click on, but the only information I have about it is the text it contains. The text is located within a &l ...

pythonhtmlseleniumcheckboxhtml-table

What is the most effective method for utilizing AJAX to load external resources?

Looking to load external resources from another server such as css, templates, and data, but unsure of the best approach? Often when attempting to load external files, the Access-Control-Allow-Origin problem arises. Here are a few possible solutions: - U ...

jqueryajaxapiload

Achieving Text Wrapping Around Unconventional Shapes Using CSS

I'm currently facing a challenge in getting text to wrap around an irregular shape on a web page. Despite numerous attempts, I have yet to find a solution that meets my requirements. Attached is an image illustrating the layout I am aiming for. The ...

htmlcssimage

Ways to prevent the TAB key from automatically shifting focus to the next element after using scrollIntoView during page initialization in the Chrome browser

Encountering a strange issue specifically on the Chrome browser. After the page loads, I am using the scrollIntoView method in the ngAfterViewInit of an Angular component. When the page loads and scrolls to the element, everything appears to be functioning ...

javascripthtmlangulargoogle-chromejs-scrollintoview

Troubleshooting a Navigation Styling Issue in HTML and CSS

I'm struggling to position my drop-down menus correctly in my WordPress theme navigation. They are appearing far away from the nav bar and end up near the top left corner of the screen when I hover over a ul li >. Here is the CSS code I am using: ...

htmlcsswordpressthemes

Utilize a single submit button to navigate through multiple pages dynamically using JavaScript

I would like to navigate to different rooms with just one button using JavaScript. For instance, there are three rooms: "Kitchen, Toilet, and Bedroom". How can I utilize JS to enter any of these rooms based on my selection? If I input "kitchen" in the text ...

phpjavascripthtmlinputvalidating

Changing the font family for Bootstrap Glyphicons on a button

I have recently started using Bootstraps Glyphicons and encountered an issue while trying to insert text inside a button with a glyphicon icon: <button type="button" class="btn btn-default pull-left" data-toggle="collapse" data-bind="attr:{'href&a ...

jqueryhtmlcsstwitter-bootstrapfonts

Encountering an issue in REACT (cra) where attempting to integrate jQuery into fullcalendar's "eventRender" results in the error message stating that "$el.popover is not a function."

Attempting to incorporate the popover option within calendar events, I followed the suggested method from fullcalendar docs. However, upon creating a callback function that utilizes the popover method alongside jQuery, an error emerged: TypeError: $el.p ...

jqueryreactjsfullcalendartooltippopover

Having issues with find_previous_sibling method in BeautifulSoup not yielding the expected results

I've been working on extracting data from a website (). While I have successfully retrieved some values like name, model, price, and fuel type, I am encountering difficulties with the "year" and "kilometers" fields. The code consistently returns "N/A" ...

pythonhtmlweb-scrapingbeautifulsoup

Steps for changing the direction of a dropdown menu to the left instead of the right

I'm having a bit of an issue with my inbox setup. I have a dropdown for it, but the dropdown is appearing off to the right and since it's at the end of my top navbar, it's not very visible. Here is the CSS code for the inbox: .notification ...

htmlcss

Ways to retrieve information from a different website's URL?

Having a bit of an issue here. I'm currently browsing through some reports on webpage #1 () and I have a specific requirement to extract the object named "data" from webpage #2 (). However, the code I've used seems to fetch the entire webpage ins ...

javascriptjqueryarraysajax

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...

jqueryhtmlcssonclick

Attempting to utilize solution for the "ajax-tutorial-for-post-and-get" tutorial

I've been exploring the implementation of the second answer provided in a post about Ajax tutorials on a popular coding forum. Despite following the instructions, I encountered an issue where the $.ajax script, triggered by an "onclick" function, only ...

javascriptjqueryajax

Navigation bar collapse items are not properly aligned in the layout

My navbar collapse button is not aligning the items in the dropdown properly. I suspect it has to do with the way I have structured the divs. How can this issue be fixed? <nav class="navbar navbar-expand-md navbar-light mb-4 row"> <b ...

htmlcssbootstrap-4