Initiate a CSS animation by defining a series of keyframes, followed by seamlessly transitioning into another set of keyframes to

Question

Initiate a CSS animation by defining a series of keyframes, followed by seamlessly transitioning into another set of keyframes to

Is it possible to create an animation that starts with one CSS keyframe set and then transitions into looping another keyframe set indefinitely?

css css-animations

Answer 1

Answer №1

It all depends on the extent of effort you are willing to put in for it :)

In my opinion, there seems to be no straightforward solution to trigger the second animation right after the completion of the first animation's last keyframe.

One workaround could involve delaying the start of the second animation until the first one finishes, as shown in this example:

#test {
  height: 50px;
  width: 50px;
  background: grey;
  animation: 2s firstAnimation forwards, 1s secondAnimation 2s alternate infinite; 
  /* the "2s" after "secondAnimation" signifies the delay */
}

@keyframes firstAnimation {
  100% {
    width: 100px;
    background: red;
  }
}

@keyframes secondAnimation {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}

<div id="test"></div>

Another potential approach involves using JavaScript's onanimationend event to trigger the second animation by adding a class dynamically:

let test = document.getElementById("test")
test.onanimationend = function(event) {
  console.log(event) // provides useful information such as the name of the ended animation :)
  test.classList.remove("startFirstAnimation")
  test.classList.add("startSecondAnimation")
}

#test {
  height: 50px;
  width: 50px;
  background: grey;
}

.startFirstAnimation {
  animation: 2s firstAnimation forwards;
}

@keyframes firstAnimation {
  100% {
    width: 100px;
    background: red;
  }
}

.startSecondAnimation {
  width: 100px !important; /* a bit of a workaround to maintain the final state of firstAnimation */
  background: red !important;
  animation: 1s secondAnimation alternate infinite;
}

@keyframes secondAnimation {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}

<div id="test" class="startFirstAnimation"></div>

Answer 2

It all depends on the extent of effort you are willing to put in for it :)

In my opinion, there seems to be no straightforward solution to trigger the second animation right after the completion of the first animation's last keyframe.

One workaround could involve delaying the start of the second animation until the first one finishes, as shown in this example:

#test {
  height: 50px;
  width: 50px;
  background: grey;
  animation: 2s firstAnimation forwards, 1s secondAnimation 2s alternate infinite; 
  /* the "2s" after "secondAnimation" signifies the delay */
}

@keyframes firstAnimation {
  100% {
    width: 100px;
    background: red;
  }
}

@keyframes secondAnimation {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}

<div id="test"></div>

Another potential approach involves using JavaScript's onanimationend event to trigger the second animation by adding a class dynamically:

let test = document.getElementById("test")
test.onanimationend = function(event) {
  console.log(event) // provides useful information such as the name of the ended animation :)
  test.classList.remove("startFirstAnimation")
  test.classList.add("startSecondAnimation")
}

#test {
  height: 50px;
  width: 50px;
  background: grey;
}

.startFirstAnimation {
  animation: 2s firstAnimation forwards;
}

@keyframes firstAnimation {
  100% {
    width: 100px;
    background: red;
  }
}

.startSecondAnimation {
  width: 100px !important; /* a bit of a workaround to maintain the final state of firstAnimation */
  background: red !important;
  animation: 1s secondAnimation alternate infinite;
}

@keyframes secondAnimation {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}

<div id="test" class="startFirstAnimation"></div>

Initiate a CSS animation by defining a series of keyframes, followed by seamlessly transitioning into another set of keyframes to

Answer №1

Similar questions

Has the querystring hack become outdated?

Encountering a "Cannot modify" error in wp-admin while using inspect element

How can you tell if a contenteditable div is currently in focus?

Adjusting cell width based on content in CSS to handle overflows automatically

Use CSS3 to hide the <li> elements initially and make them appear when the <li> is clicked on

The background color is showing the wrong shade

Discovering the dimensions of a div for a mobile browser

How can I automatically center a Vimeo iframe vertically without having to manually adjust the position?

Is there a way to eliminate the space between the gray background and the right edge of the browser window?

Modify the hover color of the FontAwesome span icon

Material UI Grid's layout does not support placing a select element within a row

Innovative HTML5 Video Canvas Shapes

CSS Text ellipsis displays only the beginning of each paragraph

The navigation bar appears to have a different width on mobile view specifically on one page

Concealing a hyperlink depending on the value chosen in a dropdown menu

Getting the full referrer URL can be achieved by using various methods depending

What is the best way to create a gallery using Bootstrap 4?

Using a simulation to deactivate webpage elements and showcase the UpdateProgress control

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

The functionality of Responsive CSS seems to be inconsistent, as it only works partially