Geek Answers Handbook

Combining multiple CSS animations

I am trying to combine 2 CSS animations, see pen: http://codepen.io/jdesilvio/pen/pjwvyO

I followed the syntax presented in other answers to similar questions , but they don't seem to work correctly:

animation-name: falling, laydown; animation-duration: 2000ms, 1000ms; animation-timing-function: ease-in, ease-out; animation-iteration-count: 1, 1;

He plays the second animation, then the first and finally the second. How can I get him to play first and then second?

Here is the complete code:

 <!DOCTYPE html> <meta charset="utf-8"> <style> html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; } @keyframes falling { 0% { transform: translate3d(0, -400px, 0); } 100% { transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg); } } @keyframes laydown { 0% { transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg); } 100% { transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg); } } #falling-card-parent { height: 150px; width: 100px; margin: auto; perspective: 1000px; } #falling-card { height: 150px; width: 100px; background-color: black; margin: auto; transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg); animation-name: falling, laydown; animation-duration: 2000ms, 1000ms; animation-timing-function: ease-in, ease-out; animation-iteration-count: 1, 1; } </style> <html> <body> <div id="falling-card-parent"> <div id="falling-card"></div> </div> </body> </html>
+7
html css css3 css-animations
source share
2 answers

The problem is actually not related to the order of the animations, but because of how several animations work on the pme element. When multiple animations are added to an element, they start at the same time by default .

Because of this, the laydown and falling animations start at the same time, but the laydown animation actually ends at 1000ms from the start, but the first animation (which falling ) doesn't "t until 2000ms ."

The W3C animation specification also says the following about several animations that access the same property during animation:

If several animations try to change the same property, the animation closest to the end of the list of names wins.

In the presented code, both animations try to change the transform property, and the second animation is closest to the end. Thus, while the second animation is still working (namely, in the first 1000 ms), the transformation changes are applied as indicated in the second animation. During this time, the first animation still works, but it has no effect, because its values ​​are overwritten. In the 2nd 1000 ms (when the second animation is already completed, but the 1st is still running), the transforms are applied as directed by the first animation. That's why it looks like the second animation works before the first animation, and then the first.

To resolve this issue, the second animation should be paused (or delayed) until the first animation finishes. This can be done by adding animation-delay (equal to the animation-duration first animation) for the second animation.

 animation-name: falling, laydown; animation-duration: 2000ms, 1000ms; animation-delay: 0ms, 2000ms; /* add this */ animation-timing-function: ease-in, ease-out; animation-iteration-count: 1, 1; 

 html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; } @keyframes falling { 0% { transform: translate3d(0, -400px, 0); } 100% { transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg); } } @keyframes laydown { 0% { transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg); } 100% { transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg); } } #falling-card-parent { height: 150px; width: 100px; margin: auto; perspective: 1000px; } #falling-card { height: 150px; width: 100px; background-color: black; margin: auto; transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg); animation-name: falling, laydown; animation-duration: 2000ms, 1000ms; animation-delay: 0ms, 2000ms; animation-timing-function: ease-in, ease-out; animation-iteration-count: 1, 1; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div id="falling-card-parent"> <div id="falling-card"></div> </div>
+7
source share

 html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; } @keyframes falling { 0% { transform: translate3d(0, -400px, 0); } 100% { transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg); } } @keyframes laydown { 0% { transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg); } 100% { transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg); } } #falling-card-parent { height: 150px; width: 100px; margin: auto; perspective: 1000px; } #falling-card { height: 150px; width: 100px; background-color: black; margin: auto; transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg); animation-name: laydown, falling; animation-duration: 2000ms, 1000ms; animation-timing-function: ease-in, ease-out; animation-iteration-count: 1, 1; } 
  <div id="falling-card-parent"> <div id="falling-card"></div> </div>

Just undo this:

  animation-name: falling, laydown;

to

  animation-name: laydown, falling;

Here: http://jsfiddle.net/hfxopjjy/

0
source share

More articles:


All Articles