Repeat animateTransform with some delay in each cycle. (SVG).

In CSS we can use keyframes to control the delay in each cycle easily. However using animateTransform in CSS to achieve the same effect is not easy. The begin attribute seems to work just once (the first time). After that the transform is repeated (and animated) without any delay in between. Fortunately that we have the values attribute which can be specified with multi values separated by semi-colons. The transform will be applied to each value in the values list and the duration of each stage is divided evenly from the total duration. We can pad some dummy values to increase the delay. The dummy values depend on the transform, such as for translate it's "0,0", for scale it's "1,1" ... it should keep the SVG unchanged. This may not be the best solution. The documentation for SVG is not very popular and detailed enough.

by viphalongpro

HTML

<svg width="99" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">         
    <path d="m35.99502,49.21692c-11.88306,0 -22.25696,5.59302 -27.80701,13.90399c5.55103,8.31104 15.92505,13.90302 27.80701,13.90302c11.88306,0 22.25696,-5.59198 27.80896,-13.90302c-5.55299,-8.31097 -15.92701,-13.90399 -27.80896,-13.90399z" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent">
        <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,63;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0" dur="3s" begin="2.8s" additive="sum" id="t1" fill="freeze" repeatCount="indefinite"/>         
        <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,0.05;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1" dur="3s" begin="2.8s"  additive="sum" id="t2" fill="freeze" repeatCount="indefinite"/>         
     </path>
     <circle r="9.83801" cy="63.12191" cx="35.995" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent">
         <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,63;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0" dur="3s" begin="2.8s" additive="sum" id="t1" fill="freeze" repeatCount="indefinite"/>         
         <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,0.05;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1;1,1" dur="3s" begin="2.8s"  additive="sum" id="t2" fill="freeze" repeatCount="indefinite"/>         
     </circle>        
</svg>

CSS

body {
    background:black;
}

JavaScript

//Without using the trick in this demo. The eye will blink continuously without any delay in between.