After each animation in the sequence is completed, CSS3 looping occurs

I have currently set up a sequence of 5 frames, where each frame consists of 3 animations that gradually fade into the next frame over time.

My challenge is figuring out how to loop the animation after completing the last sequence (in this case, #frame2).

I am open to using JavaScript to potentially detect and "force" the loop.

View the Fiddle here: http://jsfiddle.net/a0cpo5xe/1/ - The setup includes 5 frames:

#frame1 {
    animation:kf_frame_fade_up 0.4s;
    animation-fill-mode: forwards;
    animation-delay:0.8s;
}

#picture-1 .blink {
    animation:kf_frame_fade_down 0.2s;
    animation-fill-mode: forwards;
    animation-delay:0.5s;
}
#picture-1 .picture {
    animation:kf_frame_fade_up 0.2s;
    animation-fill-mode: forwards;
    animation-delay:0.5s;
}

#frame2 {
    animation:kf_frame_fade_up 0.4s;
    animation-fill-mode: forwards;
    animation-delay:4.3s;
}

#picture-2 .blink {
    animation:kf_frame_fade_down 0.2s;
    animation-fill-mode: forwards;
    animation-delay:4s;
}
#picture-2 .picture {
    animation:kf_frame_fade_up 0.2s;
    animation-fill-mode: forwards;
    animation-delay:4s;
}

/* FADES */
@keyframes kf_frame_fade_up {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes kf_frame_fade_down {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
javascriptcsscss-transitionscss-animations

Answer №1

To determine if the animation has ended, you can use JavaScript to listen for the animationend event.

animationend

The animationend event is triggered when a CSS animation is completed.

Here's an example of repeating your CSS animation from your JSFiddle three times by cloning the elements, removing them, and then adding them back at the end of the animation.

I'm confident you'll grasp the concept quickly.

var i = 1;

function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement"),
      animations = {
        "animation"      : "animationend",
        "WebkitAnimation": "webkitAnimationEnd"
      };

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

function init() {
  var animationEvent = whichAnimationEvent(),
      wrp = document.getElementById('wrapper'),
      frm2 = document.getElementById('frame2');
      cln = wrp.cloneNode(true);

  function animationEnd(evt) {
    i++;
    //console.log(evt);
    wrp.parentNode.removeChild(wrp);
    document.body.appendChild(cln);
    if (i !== 3) {
      init();
    }

  }

  frm2.addEventListener(animationEvent, animationEnd);
}

init();
#wrapper {
  text-align: center;
  color: #ffffff;
}

#frames {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #000000;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  opacity: 0; /* hide */
}

#pictures {
  position: absolute;
  top: 0;
}

.picture {
  position: absolute;
  top: 100px;
  left: 100px;
  padding: 10px;
  opacity: 0; /* hide */
}

/* ANIMATION START */
#frame1 {
  background-color: green;
  -webkit-animation:kf_frame_fade_up 0.4s;
  animation:kf_frame_fade_up 0.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay:0.8s;
  animation-delay:0.8s;
}

#picture-1 .picture {
  background-color: #116343;
  -webkit-animation:kf_frame_fade_up 0.2s;
  animation:kf_frame_fade_up 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay:0.5s;
  animation-delay:0.5s;
}

#frame2 {
  background-color: blue;
  -webkit-animation:kf_frame_fade_up 0.4s;
  animation:kf_frame_fade_up 0.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay:4s;
  animation-delay:4s;
}

#picture-2 .picture {
  background-color: #3d1163;
  -webkit-animation:kf_frame_fade_up 0.2s;
  animation:kf_frame_fade_up 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay:3.7s;
  animation-delay:3.7s;
}

/* FADES */
@-webkit-keyframes kf_frame_fade_up {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes kf_frame_fade_up {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes kf_frame_fade_down {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes kf_frame_fade_down {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
<div id="wrapper">
  <div id="frames">
    <div id="frame1" class="frame">frame 1</div>
    <div id="frame2" class="frame">frame 2</div>
  </div>
  <div id="pictures">
    <div id="picture-1">
      <div class="picture">pic 1</div>
    </div>
    <div id="picture-2">
      <div class="picture">pic 2</div>
    </div>
  </div>
</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

Highlight.js is not able to display HTML code

It's strange, I can't seem to get the HTML code to display correctly. This is my HTML: <head> <link rel="stylesheet" href="/path/to/default.css"> <script src="/path/to/highlight.pack.js"></script> <script& ...

javascripthtmlhighlight.js

Choose a specific example using the class name in nicEdit

Is there a way to select an instance using nicEdit based on its class name rather than just its id? For example: <div class="myInstance1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et ...

javascripteditorwysiwygnicedit

Slideshow featuring cards with text overlay

I am working with a bootstrap carousel and trying to place a card with text on top of it. No matter what I try, the card is not appearing as desired. Here is an example of what I want to achieve: https://i.sstatic.net/tjW3w.png Below is the code snippet: ...

htmlcsstwitter-bootstrapbootstrap-4

Is QA supported by LG WebOS 3.5 through webdriver?

I've been experimenting with Javascript ( nodejs ) and have successfully automated browser operations using selenium-webdriver on a local server. However, I am facing challenges when trying to automate tasks on my LG WebOS 3.5 TV. Does anyone know how ...

javascriptnode.jswebdriverweboslg

Looking to set up an event handler for the browser's back button in next.js?

When my modal opens, it adds a hash to the URL like example.com/#modal. I want to be able to recognize when the back button is clicked in the browser so I can toggle the state of the modal. The challenge is that since I am using next.js (server-side rend ...

javascriptnode.jsreactjsnext.js

Navigating between child nodes in an HTML drop down list with multiple options and hierarchical structure

Hey there! I am looking to create a unique HTML hierarchy drop-down menu. It will have multiple levels or options, with each option having the potential for child nodes. When an option has child nodes, an arrow will appear next to it. Clicking on this ar ...

javascriptjqueryhtmlcss

Ensure that breadcrumb links remain on a single line by using text truncation in Bootstrap 5

For creating breadcrumbs in Bootstrap 5, the documentation suggests the following code: <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home ...

cssbootstrap-5

Determining the position of p5.js input in relation to the canvas

Show me what you’ve got: function initialize() { var board = createCanvas(960,540); board.parent("drawingPad"); background('white'); var textbox = createInput(); textbox.position(10,10); textbox.parent("drawingPad"); } I’ve cre ...

javascripthtmlcsscanvasp5.js

Leveraging document.getElementById alongside css modules

When trying to retrieve an element that is using a css module, I encountered a problem where the id of the element changes after rendering. As a result, document.getElementById("modal") returns null. import React from "react"; export const HandleClick = ...

javascriptreactjssass

Node.js: Troubleshooting a forEach Function Error

I am encountering an issue with my nodejs script that is causing a "function not found" error after trying to insert data from json files into Firestore. How can I resolve this? Thank you for your help. Below is my code snippet: var admin = require("f ...

javascriptnode.jsfirebase

Is Nextjs the best choice for developing the frontend code exclusively?

When deciding whether to use Next.js or plain React for my front-end development, should I consider that a back-end already exists? If I am not planning to write a new back-end, which option would be better suited for the project? ...

javascriptnode.jsreactjsnext.jsfrontend

Is it possible to use Ajax post with localhost on Wamp server?

Looking to execute a basic POST function using Ajax on my localhost WAMP server. Here's the code I have: function fill_table() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari ...

javascriptjqueryajax

Delete the item if the link uses Javascript: void(0)

<a class="slicknav_item" href="home">Home<span></span></a> <a class="slicknav_item" href="about">About<span></span></a> <a class="slicknav_item" href="javascript: void(0)">Services<span></span& ...

javascriptjqueryindexof

Comparing Fetch and Axios: Which is Better?

Currently delving into the realms of axios and the fetch API, I am experimenting with sending requests using both methods. Here is an example of a POST request using the fetch API: let response = await fetch('https://online.yoco.com/v1/charges/&ap ...

javascriptnode.jsreactjsaxiosfetch

Utilizing JQuery to create a dynamic background image slider that cycles through images extracted from a selection of

Case Study: Implementing a background-image slider with JQuery listening for window resizing. Depending on the screen size, a specific array is set as the image file paths source. Encountering a 6-second delay issue where the initial image does not displ ...

jquerycssslideshow

Example of Image Slider using AngularJS

<body ng-app="myApp"> <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'"> <div class="slider-content" ng-switch-when="1"> <img src="../images/ship.png" /> & ...

angularjscss

Change from full manual control to automatic mode

Here is the link to my code: http://jsfiddle.net/yHPTv/2491/ I am experiencing an issue with the transition effect. The hidden element is supposed to slide into view from the right edge of the .block element, but instead, it just appears suddenly. .blo ...

javascriptjqueryhtmlcss

Navigating through JSON arrays can be achieved by utilizing iteration techniques

I'm having trouble with a script and can't figure out how to make it display in the designated div. It may have something to do with how I'm handling the response. In Chrome devtools, the response looks like this: { "[\"record one& ...

javascriptjqueryarraysjson

Troubles with z-index: issues arise when combining relative and absolute positioned divs

Struggling with my z-index arrangement here. In a nutshell, I have an absolute div positioned beneath a relative div called container. Inside the container, there are three divs: left, center, and right, all with absolute positioning. I am trying to get ...

htmlcssz-index

Class-driven dynamic CSS

Recently, I came across a JSP code snippet that looks like this: <table id="mytable" cellspacing="0"> <tr data-depth="0" class="collapse level0"> <td></td> <td></td> <td></td> </tr> ////... /...// < ...

htmlcssjsp