Halting a css3 keyframe animation

I have two unique designs that I would like to showcase in a specific order.

1) Begin by fading in design 1
2) Next, fade in design 2
3) After that, fade out design 1
4) Finally, fade out design 2

This sequence should then repeat indefinitely.

While the current code displays the correct order of patterns, it lacks the ability to pause each pattern before the next one fades in.

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
 }

@keyframes fadeOut {
 0%   { opacity: 1; }
 100% { opacity: 0; }
}

.pattern-one  {
  animation: fadeIn 2s infinite alternate;
}

.pattern-two  {
  animation: fadeOut 2s infinite alternate;
}

Is there a way to introduce a pause between each pattern transition?

cssanimationinternet-explorer-9keyframe

Answer №1

Are you attempting to replicate a similar effect?

@keyframes fadeIn {
  0%   { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 1; }
 }

@keyframes fadeOut {
  0%   { opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; }
  100% { opacity: 1; }
}


.pattern-one  {
  animation: fadeIn 4s infinite;
}

.pattern-two  {
  animation: fadeOut 4s infinite;
}
div{
  width:50px;
  height:50px;
  background-color: blue;
  margin:10px;
}
<div class="pattern-one"></div>
<div class="pattern-two"></div>

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

Effortlessly switching classes in JavaScript for seamless transitions

I'm currently working on an animation project where I want the title to be visible on the page initially, and then slowly fade away as you scroll down, with a subtitle fading in right after. While I've managed to get the title part working, I&apo ...

javascripthtmlcss

Image carousel with centered image that adjusts to different screen sizes

I have a slideshow set up with a simple fade effect and I want to make it full size responsive. Even though I have the slideshow, fullscreen settings, and responsive code working properly, I am facing an issue where the image is not centered entirely when ...

javascriptjqueryhtmlcssimage

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

javascripthtmlcssreactjsmaterial-ui

Remove the new line break at the top of the text and replace it with the remaining text

[text area control has a new line break that needs to be removed and replaced with the remaining string like image two][1] This image illustrates ...

javascriptjquerycssasp.net.net

Struggling with proper vertical alignment using Flexbox and achieving center alignment

I've been using JavaScript for displaying dynamic text and images, but I'm facing some formatting issues. Currently, I'm utilizing display: flex to position the text and image next to each other, but I'm struggling with horizontal alig ...

htmljquerycss

Is it possible to partially move the image outside of the MUI dialog?

Is it possible to move an image partially outside of the MUI dialog, with the bottom part inside and the top part outside the dialog? I attempted a solution found on Stack Overflow but it did not yield the desired result. This is the dialog code: <Dial ...

htmlcssmaterial-ui

On Chrome, everything looks good but on Firefox, my footer is mysteriously disappearing. No matter how much padding I

One of my wrapper divs has padding-bottom:40px; to show the position absolute "designed by" text at the bottom of the page. In Chrome, everything works as expected. However, in Firefox, the padding-bottom doesn't seem to have any effect and the wrapp ...

htmlcssgoogle-chromefirefox

Is it possible to create a button function in HTML that can alter the CSS image tag?

Is there a way I could create a function that can retrieve a value, update an image source, and then incrementally select another value? It would be incredibly helpful if you could provide a reference where I could learn how to do this or explain it in det ...

javascriptjqueryhtmlcss

Passing a jQuery variable called "data" into a JavaScript alert

Upon receiving a JSON response, it is successfully displayed to users without any issues. However, I am encountering a problem when trying to show a JavaScript alert. During the initial page load, the 'var' is empty, so I have disabled the JavaS ...

jqueryhtmlcssjson

Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

After applying a box shadow to the header div, I noticed that the box shadow doesn't display properly when the hidden elements within the header are revealed. <div id="header"> <div id="logo"> <a href="#"><img src="logo.png" ...

javascriptjqueryhtmlcsshtml5boilerplate

How do I change the 'CSS Theme' of my website?

With Halloween approaching, I am eager to transform my website's BODY css into a spooky Halloween theme. The challenge is that my .Net pages are Templates. Is there a way for me to ensure that the body class checks for an existing CSS theme override? ...

javascripthtmlcss.netdocument-body

Setting a div's background using JavaScript works flawlessly on jsfiddle.net, but encounters issues when implemented in actual code

contains the files you need. For reference, here is the link to the code on I have attempted to remove all unnecessary elements from the actual project, but it has not made a difference. document.getElementById("image").style.backgroundImage = "url(" + d ...

javascripthtmlcss

Applying themes in React with custom styles

I am trying to convert the const format into a React component in the following code. However, I have been unable to do so even after attempting to use state. The code is as follows: const LoginPage = () => { const styles = { loginContainer: { ...

cssreactjscomponents

Struggling with modifying background color in Vue.js?

My intention is to make the landing page background color orange, but I'm encountering an issue where all pages end up with the same color. I attempted to use scoped on the landing page to target only that specific page, however, it resulted in the e ...

javascriptcssvue.js

The reason why the div appears below the image

Is there a way to position the div above the image rather than below it, even when setting the z-index attribute in the code? The current code structure is as follows: <main id="content" role="main"> <div style="text-align: center"> & ...

htmlcssbootstrap-4

Unable to get CSS Filter to function properly in Firefox

I'm having trouble with the CSS filter on my Firefox (15.0) browser. Here is the HTML code: <div class="google"> <img src="https://www.google.com/images/srpr/logo3w.png"> </div> And here is the CSS code: .google{ -moz ...

htmlcss

Including Vuetify in my project has triggered a SecurityError, specifically relating to the CSSStyleSheet.cssRules getter being restricted from accessing cross-origin stylesheets

Looking to create a Vue application that opens a CKEditor component in a separate window, I managed to do so following the method outlined in this helpful post. I have even set up a Codesandbox demonstration to showcase the functioning example. However, u ...

cssvue.jsvuejs2vuetify.jscross-domain

The Hover function is not functioning properly when used with the <img> element

I'm puzzled as to why the code below works with other tags but not with images: // HTML <img src="https://via.placeholder.com/80x80" alt="image"> <div>lorem ipsum</div> // CSS img:hover div { color: red; } Could someone please ...

htmlcsshoverstylesheet

Exploring SVG Morphing Reversal Techniques in Anime.js

I have been trying to implement direction: 'reverse' and timeline.reverse(), but so far it hasn't been successful. Interestingly, when I set loop: true, the reverse animation can be seen within the loop. However, my goal is to trigger this a ...

javascriptanimationvue.jssvganime.js

Tips for placing a fixed footer at the bottom of a container with absolute positioning

I've set up my website container as a white box on a black background, centered on the page to allow for content resizing. Here is the code I used: .container { position: absolute; background-color: white; min-height: 90%; top: 5%; width: 9 ...

htmlcsssasshamlsticky-footer