Mixing two elements for a continuous animation without the use of JavaScript

Question

Mixing two elements for a continuous animation without the use of JavaScript

I'm interested in creating an animation that cycles between "0% interest free credit" and "free delivery". I am attempting to achieve this without the use of JavaScript, but so far I can only make the first element fade away without the second one fading in.

.parent {
  position: relative;
}

.parent p {
  position: absolute;
  top: 0;
  left: 0;
}

.parent p:first-child {
  animation: hide 2s ease-in
}

.parent p:last-child {
  opacity: 0;
  animation: show 2s ease-in animation-delay:2s;
}

@keyframes show {
  to {
    opacity: 1;
  }
}

@keyframes hide {
  to {
    opacity: 0;
  }
}

<div class="parent">
  <p>0% interest free credit</p>
  <p>free delivery</p>
</div>

What could be causing my issue? I want one element to fade out while the other fades in, and I want this to loop endlessly.

html css css-animations

Answer 1

Answer №1

To begin, ensure that your animation is configured to loop continuously. Utilize the term infinite as the animation-timing-function for this purpose.

Next, we can revamp your animation by consolidating it into a single reusable keyframe sequence that displays and conceals the element. By setting the total duration of the animation to 5 seconds and offsetting by half of that (2.5 seconds) on one element, we create a smooth loop of two elements fading in and out seamlessly:

.box {
  position: relative;
}

.box span {
  animation: fade 5s infinite;
  position: absolute;
  top: 0;
  left: 0;
}

.box span:last-child {
  animation-delay: -2.5s;
}

@keyframes fade {
  0%, 50%, 100% {
    opacity: 0;
  }
  
  15%, 40% {
    opacity: 1;
  }
}

<div class="box">
  <span>Special offer</span>
  <span>Limited time only</span>
</div>

Answer 2

To begin, ensure that your animation is configured to loop continuously. Utilize the term infinite as the animation-timing-function for this purpose.

Next, we can revamp your animation by consolidating it into a single reusable keyframe sequence that displays and conceals the element. By setting the total duration of the animation to 5 seconds and offsetting by half of that (2.5 seconds) on one element, we create a smooth loop of two elements fading in and out seamlessly:

.box {
  position: relative;
}

.box span {
  animation: fade 5s infinite;
  position: absolute;
  top: 0;
  left: 0;
}

.box span:last-child {
  animation-delay: -2.5s;
}

@keyframes fade {
  0%, 50%, 100% {
    opacity: 0;
  }
  
  15%, 40% {
    opacity: 1;
  }
}

<div class="box">
  <span>Special offer</span>
  <span>Limited time only</span>
</div>

Mixing two elements for a continuous animation without the use of JavaScript

Answer №1

Similar questions

What is the best way to create a repeating Jquery loop in code?

Need to conceal certain images in Isotope, but ensure they can easily be revealed when necessary?

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

The drag functionality can only be used once when applied to two separate div elements

Fade in a CSS class using jQuery

Struggling to access a .html page using Selenium?

Encountering a 404 Not Found issue while trying to add scripts with Node.js

Obtaining the class value using the getAttribute function

Validating Input in a Textbox Using Jquery When Pasting Data

jQuery is an excellent tool for implementing drag and drop folder upload functionality, all without

Expanding Div Heights that Adjust to the Browser's Width

Tips for properly formatting quotes in JSON to activate a link

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

Tips for effectively utilizing conditional comments

Stopping the WordPress gallery at the end without looping using Elementor

Displaying a variable in a live HTML user interface

Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

What is the best way to create a page that moves on release using HTML/CSS?

Ensure that the child element completely fills the parent element while maintaining a padding around the edges