CODEWITHSUNDEEP
javascriptcsssvgcss-animations
smpa01
smpa01

Reputation: 4346

CSS animation to repeat every nth second

I am animating a svg element currently like following

.r1 {
     transform-box: fill-box;
     transform-origin: 50% 50%;    
     animation-name: simpleRotation,xRotation;
     animation-delay: 0s, 2s;
     animation-duration: 2s;
     animation-iteration-count: 1, 1;
     animation-timing-function: linear;
     animation-direction: normal;
     animation-fill-mode: forwards;
}

@keyframes simpleRotation {
     from {
         transform: rotate(0deg); 
    }
     to {
         transform: rotate(359deg);
  
    }
}
@keyframes xRotation {
     from {
         transform: rotateX(0deg); 
    }
     to {
         transform: rotateX(359deg); 
    }
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect class="r1" id="r1" x="10" y="10" width="10" height="10" stroke="black" stroke-width="0.25" fill="orange"></rect>    
    </svg>

Is it possible to queue the animations (with javascript) in a way so that every 2s the animation runs one after another in a loop such as simpleRotation(0-2s);xRotation(2-4s);simpleRotation(4-6s);xRotation(6-8s);simpleRotation(8-10s);.....

Upvotes: 0

Views: 287

Answers (2)

herrstrietzel
herrstrietzel

Reputation: 17334

An alternative to ccprog's svg SMIL approach might be using the Web Animations API

The keyframe animation can be translated to an animation object like this

let ani1 = animEl.animate(
  [{
    transform: "rotate(0deg)"
  }, {
    transform: "rotate(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1
  }
);

See also: MDN: Using the Web Animations API

Example

let animEl = document.querySelector(".rect1");

let ani1 = animEl.animate(
  [{
    transform: "rotate(0deg)"
  }, {
    transform: "rotate(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1
  }
);

let ani2 = animEl.animate(
  [{
    transform: "rotateX(0deg)"
  }, {
    transform: "rotateX(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1,
  }
);
// pause 2. animation
ani2.pause();

// chain animations
ani1.onfinish = function() {
  ani2.play();
};

ani2.onfinish = function() {
  ani1.play();
};
svg {
  border: 1px solid #ccc;
  display: block;
  width: 10em
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect class="rect1" id="r1" x="25" y="25" width="50" height="50" stroke="black" stroke-width="0.25" fill="orange" transform-origin="50 50" ></rect>
</svg>

We pause the second on start animation via

 ani2.pause();

and add an eventListener to start the second animation after the first one has finished.

ani1.onfinish = function() {
  ani2.play();
};

Edit you could also use premises as described by Dan Wilson

Don't miss out on the power of svg's SMIL animation

Especially when it comes to svg related animations, they still offer many bells and whistles not available in css animations like

  1. Sequential animations:

    <animate[...] begin="firstAnimation.end" />

The ability to start a consecutive animation (without any calculations of previous duration) via begin property is just awesome – this elegant concept should have been adopted to corresponding css animation methods.

  1. Move elements along paths
  2. self contained animations – like loading spinners ... svg wins!

Caniuse:

SMIL animations tend to have more solid browser support than Web Animations API
Albeit, it's neglectable due to the grateful retirement of internet explorer.

Upvotes: 2

ccprog
ccprog

Reputation: 21921

This is a case where the SVG animation format is easier to use than the CSS keyframe animation - in principle.

SVG animations can define the begin time of an animation in relation to events - among them the end of another animation. This way you can chain animations together, and you can define loops:

<animate id="first" begin="0s;second.end" ... />
<animate id="second" begin="first.end" ... />

The first animation begins at 0s and additionally is triggered by the end of the second animation, and the second animation is triggered by the end of the first animation.

The problem with your use case is that you want to animate 3D transform functions. SVG transform differs in syntax from CSS transform, and does only support 2D transformations. So the following example at best can simulate the effect, and a number of details has to be written in a different manner.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect id="r1" x="-5" y="-5" transform="translate(15 15)"
        width="10" height="10" stroke="black" stroke-width="0.25" fill="orange">
    <animateTransform id="simpleRotation" attributeName="transform" type="rotate"
                      additive="sum" begin="0s;xRotation.end" dur="2s"
                      from="0" to="360" />
    <animateTransform id="xRotation" attributeName="transform" type="scale"
                      additive="sum" begin="simpleRotation.end" dur="2s"
                      values="1 1;1 -1;1 1" keyTimes="0;0.5;1"
                      calcMode="spline" keySplines=".375 0 .375 1;.375 0 .375 1" />
  </rect>
</svg>

  • the center of the animated object is initially placed at 0,0 to simplify the following transforms. Each <animateTransform> gets a additive="sum" attribute so that it is post-multiplied to the static translate() attribute on the animated object.
  • to simulate xRotate(), a scale transform is used that scales the y axis from 1 to -1 and back. Additionally, a spline interpolation is defined to give the impression of a smooth "rotation". Note that this simulation only works in absence of a perspective.

Upvotes: 3

Related Questions