Can CSS transitions be synced up to happen simultaneously?

Question

Can CSS transitions be synced up to happen simultaneously?

Here is a snippet of code showcasing CSS transitions applied to the height property. It seems that CSS transitions work asynchronously, but I am curious if there's a way to make them synchronous without using jQuery or other methods.

CSS:

.animated {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0px,0px,0px);
    transition: height 1.5s;
    -webkit-transition: height 1.5s;
    -webkit-perspective: 1500;
    -webkit-backface-visibility: hidden;
}

HTML:

<div id='someElement' class='animated'></div>

JavaScript:

$("#someElement").css("height","200px");
//Additional JavaScript code to run after the completion of CSS animation

javascript css css-transitions

Answer 1

Answer №1

Unfortunately, there is no direct way to achieve synchronous behavior with animations. However, you can create the illusion of synchronicity by waiting for the animation to complete.

A Possible Solution

var crossBrowserEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';

$("#someElement").css("height","200px");

$("#someElement").one('crossBrowserEvent',function(e) {
    do_some();
    perform_magic();
    additional_actions_here();
    execute_when_animation_ends();
});

Additional Notes

Since CSS3 animations are not fully supported across all browsers, it's important to listen for multiple events. This helps avoid issues that may arise if different browsers implement events like animationEnd and webkitAnimationEnd simultaneously. Using the one event attachment method instead of on can help mitigate these conflicts.

Answer 2

Unfortunately, there is no direct way to achieve synchronous behavior with animations. However, you can create the illusion of synchronicity by waiting for the animation to complete.

A Possible Solution

var crossBrowserEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';

$("#someElement").css("height","200px");

$("#someElement").one('crossBrowserEvent',function(e) {
    do_some();
    perform_magic();
    additional_actions_here();
    execute_when_animation_ends();
});

Additional Notes

Since CSS3 animations are not fully supported across all browsers, it's important to listen for multiple events. This helps avoid issues that may arise if different browsers implement events like animationEnd and webkitAnimationEnd simultaneously. Using the one event attachment method instead of on can help mitigate these conflicts.

Answer 3

Answer №2

Learn how to create sequential class changes using pure JS and the webkit prefix.

This code snippet showcases multiple animations with a handler function that triggers on each animation completion. By checking for a specific property name (such as 'color'), the handler function swaps classes using classList.toggle('active');, each with different transition lengths.

function handler(e){
 //Triggered when the transition ends.
 //Add your custom code here or:
 if(e.propertyName=='color'){
  e.target.classList.toggle('active');
 }
}
var div=document.getElementsByTagName('div')[0];
div.addEventListener('webkitTransitionEnd',handler,false);
div.classList.toggle('active');

Check out the DEMO for Chrome, Safari, Android, and iOS:

http://jsfiddle.net/jaqT7/

If you need additional browser support, search for prefixes like -webkit, -ms, -moz, and ensure the correct transitionend handler is used.

Explore an example of sequential animations with delays:

Answer 4

Learn how to create sequential class changes using pure JS and the webkit prefix.

This code snippet showcases multiple animations with a handler function that triggers on each animation completion. By checking for a specific property name (such as 'color'), the handler function swaps classes using classList.toggle('active');, each with different transition lengths.

function handler(e){
 //Triggered when the transition ends.
 //Add your custom code here or:
 if(e.propertyName=='color'){
  e.target.classList.toggle('active');
 }
}
var div=document.getElementsByTagName('div')[0];
div.addEventListener('webkitTransitionEnd',handler,false);
div.classList.toggle('active');

Check out the DEMO for Chrome, Safari, Android, and iOS:

http://jsfiddle.net/jaqT7/

If you need additional browser support, search for prefixes like -webkit, -ms, -moz, and ensure the correct transitionend handler is used.

Explore an example of sequential animations with delays:

Can CSS transitions be synced up to happen simultaneously?

Answer №1

A Possible Solution

Additional Notes

Answer №2

Similar questions

Loop through a collection of object arrays within a JavaScript context

Chrome may clip the gradient radius when setting the focal point outside of the SVG gradient

Handling redirection on a single-page website without javascript functionality turned on

Conceal the Tab Bar in Stack Navigator Excluding the tabBarVisible Setting

Adjust the Bootstrap date-time-picker to accommodate various languages, while ensuring that the selected date and time are displayed in English

Leveraging async/await within a React functional component

Using React.js - Discover the best way to incorporate a function within a child component to unmount a different child component from the same parent, and then mount a new component in its place

Authentication for file uploads in Angular 2 using Dropzone and passportjs

Is it possible for a media query to target only 2 elements instead of all 3?

Demonstrate how to pass a newline character from Ruby on Rails to JavaScript

The issue of NETWORK ERROR cannot be fixed through the use of axios

Angular Material - Data Table Kit

Moment.js generated an error due to an unhandled promise rejection warning

Troubleshooting await and async functions in Express.js applications

The variable referencing an unidentified function has not been defined

How to organize and reuse code efficiently with Node.js, EJS, and front-end JavaScript?

Utilizing Angular's DomSanitizer to safely bypass security scripts

Steps to send an asynchronous AJAX request to the server-side within the JQuery validation plugin using the addMethod() function

Guide on building a "like" button using a Node.js Express application

How can I center-align images in WordPress?