Link several CSS animations in Muse

Navigation
1

Following the tutorial that I detail below I have managed to load animations made with animist in Muse.

What I can not do is link several consecutive animations.

For example, I want to be able to link the scale-up-right and scale-up-left effects consecutively in the same element.

Independently, each of the effects has this code: 

.scale-up-right {
        -webkit-animation: scale-up-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        -moz-animation: scale-up-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: scale-up-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

.scale-up-left {
    -webkit-animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    -moz-animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2017-4-28 20:47:46
 * http://animista.net
 * T: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes flip-horizontal-bottom{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}@keyframes flip-horizontal-bottom{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}
@-webkit-keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}
@-webkit-keyframes scale-up-right{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}}@keyframes scale-up-right{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}}
@-webkit-keyframes scale-up-left{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 50%;transform-origin:0 50%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%}}@keyframes scale-up-left{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 50%;transform-origin:0 50%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%}}

I have tried quite a few combinations but I am not able to get it.

Thank you!

Animist in Muse Tutorial: link

Animist website: link

    
asked by nothinggoodavailable 28.04.2017 в 20:50
source

2 answers

0

The animation-delay property exists. This property accepts an amount of time (in seconds or milliseconds) that will be taken to retract the animation. In your case, the delay would obviously have the class that triggers the second animation and the amount of time will be the duration of the first animation. 

.scale-up-left {
    animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) .4s 1 normal both;
}

PD: The 1 corresponds to animation-iteration-count and normal to animation-direction .

    
answered by 28.04.2017 в 21:36
0

The problem with which you find yourself in the code you share is that if you put an element the scale-up-right scale-up-left , as both have defined animation, one will "step on" the other and only one of the animations will be executed and not both at once or one followed by the other (although you have them defined in different classes and even if you have animation-delay in both).

But in CSS you can add several animations to an element by separating them with commas. And in the same way, if you want to add properties to the animations, you will have to separate them with commas and they will be applied to the corresponding animation in the order in which they are placed. For example: 

miSelector {
    animation-name: nombre_animacion_A, nombre_animacion_B;
    animation-duration: duracion_animacion_A, duracion_animacion_B;
    animation-direction: direccion_animacion_A, direccion_animacion_B;
    ...
}

So for this case, what you want to do is create a new CSS rule, which combines the animations of scale-up-right and scale-up-left into one, separating them with commas. And then add a animation-delay so that the first one executes after 0 seconds, while the second one executes after the duration of the first one (so they will run chained and without pause).

Below you can see it working. First the animation of scale-up-left is executed (growing in size) and then the animation of scale-up-right is executed (moving from right to left).

To simplify it a bit and make no noise, I have removed the browser prefixes, you should add them again: 

.midiv {
  animation-name: scale-up-left, scale-up-right;
  animation-duration: 0.4s, 0.4s;
  animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000), cubic-bezier(0.390, 0.575, 0.565, 1.000);
  animation-direction: both, both;
  animation-delay:0s, 0.4s;
}

@keyframes scale-up-right {
  0% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
  }
}

@keyframes scale-up-left {
  0% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
  }
}
<div class="midiv">
  TEXTO
</div>
    
answered by 29.04.2017 в 07:26
Help with an ArrayList [closed] Error no match for call to (std :: vectorint) (int &)