Good afternoon, dear, please tell me how in SMIL to implement delays in infinitely repeating animation? I will give an example

#work{ border: 1px solid #000; } #obgect{ animation: moveObject 4s linear infinite; } @keyframes moveObject{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(100px); } } 
 <svg id="work" x="0px" y="0px" viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve"> <circle id="obgect" r="10" cx="10px" cy="50%" fill="red"/> <animate xlink:href="#obgect" attributeName="r" dur="2s" begin="1s" repeatCount="indefinite" values="10;20;10" ></animate> </svg>

On the first pass, everything is fine. - After the first second, the ball increases, at the 3rd second it acquires its original size, and then comes the complete mismatch. I need to understand how to make the ball change its size only from 2 to 3 seconds in an infinite loop. (We don’t touch CSS animation) Actually the question is how to implement repeated delays in the animation of an infinite loop?

  • Should the ball from 2 to 3 seconds increase and decrease or only increase? - Alexandr_TT
  • increase and decrease. Animation should occur like this: 0% -25% - no change in size; 25% -50% increase in size; 50% -75% reduction in the amount of 75% -100% no change. - BlackStar1991

1 answer 1

SMIL is a clean declaration. There are no variables, functions, etc. Therefore, there is no place to memorize the current state in an infinite loop. But you wanted to get the animation on pure SMIL, so I used the opportunity to make a chain of sequential animations and the last animation goes to the first animation, begin="0s;an6.end" , and as pauses I put the animation caps that do nothing but participate in a chain of animations. These are strings with the attribute - values="10;10"

 <svg id="work" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="200" height="200" viewBox="0 0 200 200" > <style> #work{ border: 1px solid #000; } #obgect{ animation: moveObject 8s linear infinite; } @keyframes moveObject{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(180px); } } </style> <circle id="obgect" r="10" cx="10px" cy="50%" fill="red"/> <animate id="an1" xlink:href="#obgect" attributeName="r" dur="1s" begin="0s;an6.end" values="10;10"> </animate> <animate id="an2" xlink:href="#obgect" attributeName="r" dur="2s" begin="an1.end" values="10;20;10"> </animate> <animate id="an3" xlink:href="#obgect" attributeName="r" dur="1s" begin="an2.end" values="10;10"> </animate> <animate id="an4" xlink:href="#obgect" attributeName="r" dur="1s" begin="an3.end" values="10;10"> </animate> <animate id="an5" xlink:href="#obgect" attributeName="r" dur="2s" begin="an4.end" values="10;20;10"> </animate> <animate id="an6" xlink:href="#obgect" attributeName="r" dur="1s" begin="an5.end" values="10;10"> </animate> </svg>

Below is the timing of sequential animations. The green rectangle is the horizontal movement of the ball back and forth, set in CSS styles.

Increased the length and time of the ball for clarity.

Animation scheme

an1, an3, an4, an6 are the identifiers of the animation an2 that provide pauses between the an2 and an5 increase and decrease the size of the ball.

  • Cool, thanks. I really thought it could be somehow easier to implement. I don’t like to produce empty code (I’m about stubs now) - BlackStar1991
  • one
    @ BlackStar1991 And there’s no other way to do it if you asked for pure SMIL because of what you wrote above about the SMIL declarator. - Alexandr_TT
  • one
    @ BlackStar1991 Using js would be much smaller lines, but about the implementation using CSS would be longer. I have fulfilled your conditions at 100%. Please mark the answer as a solution. - Alexandr_TT
  • It is a pity that in the SMIL it is so difficult to implement delays. I had to rebuild the animation codepen.io/BlackStar1991/pen/XpBQzm - BlackStar1991
  • @ BlackStar1991 Looked. well done! - Alexandr_TT