Svg Animation Delay on Each Repetition

SVG animation delay on each repetition

You can add the end event of a SMIL animated element to the begin attribute.

Also, you can add multiple values, separated by ; to this begin attribute :

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">  <circle cx="50" cy="50" r="15" fill="blue">    <animate id="op" attributeType="CSS" attributeName="opacity"             from="1" to="0" dur="3s" begin="3s;op.end+3s" />  </circle></svg>

animateMotion SVG, delay?

You could add another fake/pause element to link the begin/end...first one is just a pause that doesn't really do anything (so it doesn't vanish when its not on the path).

<animateTransform begin="myanim.end" id="pause" dur="3s" type="translate" attributeType="XML" attributeName="transform"/>

<animateMotion id="myanim" dur="6s" begin="0; pause.end" fill="freeze">
       <mpath xlink:href="#theMotionPath"/>
</animateMotion>

Example fiddle

Keyframes CSS multiple delayed animations on SVG paths

I'm not sure if my suggestion would help, but have you tried with other SVG attributes like begin (read more about it here)? I've worked with SVG in the past but it seems like your SVG animation is a bit more complicated, so I'm not sure if you can achieve what you want purely with SVG (but probably the answer is yes). There are many other SVG attributes. Check them out.

I also thought answers to this question might help you. I know that the question was different (or at least not exactly the same), but ignore the question. Look at the attributes that people suggested in their answers. You might get some fresh ideas how to solve your problem. Hope this will help you at least a little bit.

---

EDIT: THE SOLUTION

You need to put -webkit-animation BEFORE -webkit-animation-delay in order to get animation delay work. If you change this order for example in your CSS for title-consulenze-ambientali and for title-sanzioni-ambientali, you'll see that now the delay starts to work. You can see that only "CONSULENZE e PARERI AMBIENTALI" appears first and not both at the same time - but only for the first time after you refresh the snippet!

See these two snippets bellow and pay attention to the headings. I simplified your code (only these two headings, nothing else) so that you can easily follow what I'm talking about.

YOUR CODE: Both headings appear at the same time.

.badgeconsul h3 {
  font-weight: bold;
  position: absolute;
  margin: auto;
  width: 100%;
  top: 0;
}

/* animazione paths icone servizi home */

@keyframes opacitypathicon {
  0% {
    opacity: 0
  }
  25% {
    opacity: 0.75
  }
  50% {
    opacity: 1
  }
  75% {
    opacity: 0.75
  }
  100% {
    opacity: 0
  }
}

/* elementi icone da animare */

#consulenze-ambientali,
#title-consulenze-ambientali {
  opacity: 0;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: opacitypathicon 3s linear infinite;
  -moz-animation: opacitypathicon 3s linear infinite;
  -ms-animation: opacitypathicon 3s linear infinite;
  -o-animation: opacitypathicon 3s linear infinite;
  animation: opacitypathicon 3s linear infinite;
}

#sanzioni-ambientali,
#title-sanzioni-ambientali {
  opacity: 0;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation: opacitypathicon 3s linear infinite;
  -moz-animation: opacitypathicon 3s linear infinite;
  -ms-animation: opacitypathicon 3s linear infinite;
  -o-animation: opacitypathicon 3s linear infinite;
  animation: opacitypathicon 3s linear infinite;
}

<div class="badgeconsul">
  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512"
    height="512" viewBox="0 0 512 512" width="512" version="1.1">
 

  <h3 id="title-consulenze-ambientali" class="section-subtitle text-center">
    CONSULENZE e PARERI AMBIENTALI
  </h3>

  <h3 id="title-sanzioni-ambientali" class="section-subtitle text-center">
    RICORSI PER SANZIONI AMBIENTALI
  </h3>

</div>

SVG animation: Delaying before repeating

You can use values rather than from/to to provide more values. And then keyTimes to explain when to use them.

Something like this...

<svg>
  <animateTransform     attributeType="xml"     attributeName="transform"     type="rotate"     values="0; 90; 90"     keyTimes="0; 0.25; 1"     begin="0s"     dur="1.5s"     additive="sum"     repeatCount="indefinite"     fill="freeze" />  <rect     style="fill:#888;"     id="rect"     width="60"     height="40"     x="45"     y="-95"     transform="rotate(90)" /></svg>

SVG Animations with delay

Ok, so if anyone stumbles upon this and has a similar problem then the solution for me was completely different from the ones mentioned:

• I made the animation on canvas. This ensures smooth animation after any lag or user actions. https://jsbin.com/gijohucaxe/edit?js,output

const canvas = document.querySelector("canvas");const cHeight = 249;const cWidth = 72;canvas.height = cHeight;canvas.width = cWidth;
const ctx = canvas.getContext("2d");const bW = 72;const bH = 48;

const fps = 120;const duration = 1700;const frameTime = 1000 / fps;const elementCount = 6;
const startTime = Date.now();let previousFrame = startTime;
const timings = {  0: [0.1, 0.1, 0.1, 0.1, 0.1, 1.0, 1.0, 1.0, 1.0, 0.5, 0.1],  1: [0.1, 0.1, 0.1, 0.1, 1.0, 0.9, 0.8, 0.5, 0.5, 0.1, 0.1],  2: [0.1, 0.1, 0.1, 1.0, 0.8, 0.7, 0.6, 0.3, 0.1, 0.1, 0.1],  3: [0.1, 0.1, 1.0, 0.6, 0.4, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],  4: [0.1, 1.0, 0.5, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],  5: [1.0, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],};
const timingFunction = (animationTime, animationLength, timing) => {
   // How many steps there are in timing definition, we count spaces not steps  const positions = timing.length - 1;
  const stepSize = animationLength / positions; // How long time is for each step  // For which step to take values
  const animationStep = Math.floor(animationTime / stepSize);  // How much time is elapsed in step
  const minMaxTimingDelta = timing[animationStep + 1] - timing[animationStep];  const timingAddition = timing[animationStep];
  const timeInStep = animationTime % stepSize;  // Coificient to multiply max value with  const coefficient = timeInStep / stepSize;  const timingCoefficient = coefficient * minMaxTimingDelta;
  return timingAddition + timingCoefficient;};

function drawElement(animationTime) {  ctx.clearRect(0, 0, cWidth, cHeight)  const min = 0;  const max = 1;
  const delay = 700;  const inDelay = animationTime < delay;  const newAnimTime = duration - delay;
  for (let i = 0; i < elementCount; i++) {    const alpha = inDelay ? 0.1 : timingFunction(      animationTime - delay,      newAnimTime,      timings[i],      min,      max,    )

    ctx.globalAlpha = alpha;    ctx.fillStyle = 'green';    ctx.fillRect(0, i * (bH + 3), bW, bH);      }}

const animate = () => {  if (Date.now() - previousFrame > frameTime) {      previousFrame = Date.now();      drawElement((previousFrame - startTime) % duration);  }
  requestAnimationFrame(animate);};requestAnimationFrame(animate);

body {  height: 100%;  width: 100%;}
canvas {  position: absolute;  top: 0;  left: 0;}
.1 {  opacity: .9;  background-color: blue;  width: 50px;  height: 50px;  border: 1px solid red;}

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body>   <canvas /></body></html>

Is there a way to delay the restart in SVG animateTransform

Try following code

<animateTransform attributeName="transform"
    type="rotate"
    from="120 262.5 125"
    to="0 262.5 125"
    begin="0"
    dur="2s"
    repeatCount="indefinite"
    keyTimes="0;0.75;1" 
     values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3"
 />

here animation begin is specified with relative to animation end, in this way your animation will always wait for your specified time(here 4 sec) and start playing again ...

---

Related Topics