1

iam currently animating a spinner.svg graphic, but i dont get the animation work properly. Here is my current code, which works pretty well, but after one circle, the animation isn't synchronized anymore...and i cant find the issue...

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<g id="spinner">

<g id="1">
<path opacity="0.2" d="M16.3815,8.97584C16.3815,8.93178 16.3458,8.89607 16.3018,8.89607L15.6982,8.89607C15.6542,8.89607 15.6185,8.93178 15.6185,8.97584L15.6185,12.8143C15.6185,12.8583 15.6542,12.8941 15.6982,12.8941L16.3018,12.8941C16.3458,12.8941 16.3815,12.8583 16.3815,12.8143L16.3815,8.97584Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" />
</path>
</g>

<g id="2">
<path opacity="0.2" d="M19.8425,10.1077C19.8645,10.0695 19.8515,10.0207 19.8133,9.9987L19.2906,9.69693C19.2525,9.6749 19.2037,9.68797 19.1817,9.72613L17.2624,13.0503C17.2404,13.0885 17.2535,13.1373 17.2916,13.1593L17.8143,13.4611C17.8525,13.4831 17.9013,13.47 17.9233,13.4319L19.8425,10.1077Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1333s" />   
</path>
</g>

<g id="3">
<path opacity="0.2" d="M22.2739,12.8183C22.312,12.7963 22.3251,12.7475 22.3031,12.7094L22.0013,12.1867C21.9793,12.1485 21.9305,12.1355 21.8923,12.1575L18.5681,14.0767C18.53,14.0987 18.5169,14.1475 18.5389,14.1857L18.8407,14.7084C18.8627,14.7465 18.9115,14.7596 18.9497,14.7376L22.2739,12.8183Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2666s" />   
</path>
</g>

<g id="4">
<path opacity="0.2" d="M23.0242,16.3815C23.0682,16.3815 23.1039,16.3458 23.1039,16.3018L23.1039,15.6982C23.1039,15.6542 23.0682,15.6185 23.0242,15.6185L19.1857,15.6185C19.1417,15.6185 19.1059,15.6542 19.1059,15.6982L19.1059,16.3018C19.1059,16.3458 19.1417,16.3815 19.1857,16.3815L23.0242,16.3815Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" />   
</path>
</g>

<g id="5">
<path opacity="0.2" d="M21.8923,19.8425C21.9305,19.8645 21.9793,19.8515 22.0013,19.8133L22.3031,19.2906C22.3251,19.2525 22.312,19.2037 22.2739,19.1817L18.9497,17.2624C18.9115,17.2404 18.8627,17.2535 18.8407,17.2916L18.5389,17.8143C18.5169,17.8525 18.53,17.9013 18.5681,17.9233L21.8923,19.8425Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5333s" />   
</path>
</g>

<g id="6">
<path opacity="0.2" d="M19.1817,22.2739C19.2037,22.312 19.2525,22.3251 19.2906,22.3031L19.8133,22.0013C19.8515,21.9793 19.8645,21.9305 19.8425,21.8923L17.9233,18.5681C17.9013,18.53 17.8525,18.5169 17.8143,18.5389L17.2916,18.8407C17.2535,18.8627 17.2404,18.9115 17.2624,18.9497L19.1817,22.2739Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6666s" />   
</path>
</g>

<g id="7">
<path opacity="0.2" d="M15.6185,23.0242C15.6185,23.0682 15.6542,23.1039 15.6982,23.1039L16.3018,23.1039C16.3458,23.1039 16.3815,23.0682 16.3815,23.0242L16.3815,19.1857C16.3815,19.1417 16.3458,19.1059 16.3018,19.1059L15.6982,19.1059C15.6542,19.1059 15.6185,19.1417 15.6185,19.1857L15.6185,23.0242Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" />   
</path>
</g>

<g id="8">
<path opacity="0.2" d="M12.1575,21.8923C12.1355,21.9305 12.1485,21.9793 12.1867,22.0013L12.7094,22.3031C12.7475,22.3251 12.7963,22.312 12.8183,22.2739L14.7376,18.9497C14.7596,18.9115 14.7465,18.8627 14.7084,18.8407L14.1857,18.5389C14.1475,18.5169 14.0987,18.53 14.0767,18.5681L12.1575,21.8923Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9333s" />   
</path>
</g>

<g id="9">
<path opacity="0.2" d="M9.72613,19.1817C9.68797,19.2037 9.6749,19.2525 9.69693,19.2906L9.9987,19.8133C10.0207,19.8515 10.0695,19.8645 10.1077,19.8425L13.4319,17.9233C13.47,17.9013 13.4831,17.8525 13.4611,17.8143L13.1593,17.2916C13.1373,17.2535 13.0885,17.2404 13.0503,17.2624L9.72613,19.1817Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.0666s" />    
</path>
</g>

<g id="10">
<path opacity="0.2" d="M8.97584,15.6185C8.93178,15.6185 8.89607,15.6542 8.89607,15.6982L8.89607,16.3018C8.89607,16.3458 8.93178,16.3815 8.97584,16.3815L12.8143,16.3815C12.8583,16.3815 12.8941,16.3458 12.8941,16.3018L12.8941,15.6982C12.8941,15.6542 12.8583,15.6185 12.8143,15.6185L8.97584,15.6185Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.1999s" />      
</path>
</g>

<g id="11">
<path opacity="0.2" d="M10.1077,12.1575C10.0695,12.1355 10.0207,12.1485 9.9987,12.1867L9.69693,12.7094C9.6749,12.7475 9.68797,12.7963 9.72613,12.8183L13.0503,14.7376C13.0885,14.7596 13.1373,14.7465 13.1593,14.7084L13.4611,14.1857C13.4831,14.1475 13.47,14.0987 13.4319,14.0767L10.1077,12.1575Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.3332s" />     
</path>
</g>

<g id="12">
<path opacity="0.2" d="M12.8183,9.72613C12.7963,9.68797 12.7475,9.6749 12.7094,9.69693L12.1867,9.9987C12.1485,10.0207 12.1355,10.0695 12.1575,10.1077L14.0767,13.4319C14.0987,13.47 14.1475,13.4831 14.1857,13.4611L14.7084,13.1593C14.7465,13.1373 14.7596,13.0885 14.7376,13.0503L12.8183,9.72613Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.4665s" />     
</path>
</g>
</g>
</g>
</svg>

maybe someone of you can find the error, which i dont see :/ - thanks!

1 Answer 1

1

It seems your animation duration isn't correct : changing it to 1.6 looks better.
or you can change the step of begin to 0.1

1.6/12=0.13333
1.2/12=0.1

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<g id="spinner">

<g id="1">
<path opacity="0.2" d="M16.3815,8.97584C16.3815,8.93178 16.3458,8.89607 16.3018,8.89607L15.6982,8.89607C15.6542,8.89607 15.6185,8.93178 15.6185,8.97584L15.6185,12.8143C15.6185,12.8583 15.6542,12.8941 15.6982,12.8941L16.3018,12.8941C16.3458,12.8941 16.3815,12.8583 16.3815,12.8143L16.3815,8.97584Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0s" />
</path>
</g>

<g id="2">
<path opacity="0.2" d="M19.8425,10.1077C19.8645,10.0695 19.8515,10.0207 19.8133,9.9987L19.2906,9.69693C19.2525,9.6749 19.2037,9.68797 19.1817,9.72613L17.2624,13.0503C17.2404,13.0885 17.2535,13.1373 17.2916,13.1593L17.8143,13.4611C17.8525,13.4831 17.9013,13.47 17.9233,13.4319L19.8425,10.1077Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.1333s" />   
</path>
</g>

<g id="3">
<path opacity="0.2" d="M22.2739,12.8183C22.312,12.7963 22.3251,12.7475 22.3031,12.7094L22.0013,12.1867C21.9793,12.1485 21.9305,12.1355 21.8923,12.1575L18.5681,14.0767C18.53,14.0987 18.5169,14.1475 18.5389,14.1857L18.8407,14.7084C18.8627,14.7465 18.9115,14.7596 18.9497,14.7376L22.2739,12.8183Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.2666s" />   
</path>
</g>

<g id="4">
<path opacity="0.2" d="M23.0242,16.3815C23.0682,16.3815 23.1039,16.3458 23.1039,16.3018L23.1039,15.6982C23.1039,15.6542 23.0682,15.6185 23.0242,15.6185L19.1857,15.6185C19.1417,15.6185 19.1059,15.6542 19.1059,15.6982L19.1059,16.3018C19.1059,16.3458 19.1417,16.3815 19.1857,16.3815L23.0242,16.3815Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.4s" />   
</path>
</g>

<g id="5">
<path opacity="0.2" d="M21.8923,19.8425C21.9305,19.8645 21.9793,19.8515 22.0013,19.8133L22.3031,19.2906C22.3251,19.2525 22.312,19.2037 22.2739,19.1817L18.9497,17.2624C18.9115,17.2404 18.8627,17.2535 18.8407,17.2916L18.5389,17.8143C18.5169,17.8525 18.53,17.9013 18.5681,17.9233L21.8923,19.8425Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.5333s" />   
</path>
</g>

<g id="6">
<path opacity="0.2" d="M19.1817,22.2739C19.2037,22.312 19.2525,22.3251 19.2906,22.3031L19.8133,22.0013C19.8515,21.9793 19.8645,21.9305 19.8425,21.8923L17.9233,18.5681C17.9013,18.53 17.8525,18.5169 17.8143,18.5389L17.2916,18.8407C17.2535,18.8627 17.2404,18.9115 17.2624,18.9497L19.1817,22.2739Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.6666s" />   
</path>
</g>

<g id="7">
<path opacity="0.2" d="M15.6185,23.0242C15.6185,23.0682 15.6542,23.1039 15.6982,23.1039L16.3018,23.1039C16.3458,23.1039 16.3815,23.0682 16.3815,23.0242L16.3815,19.1857C16.3815,19.1417 16.3458,19.1059 16.3018,19.1059L15.6982,19.1059C15.6542,19.1059 15.6185,19.1417 15.6185,19.1857L15.6185,23.0242Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.8s" />   
</path>
</g>

<g id="8">
<path opacity="0.2" d="M12.1575,21.8923C12.1355,21.9305 12.1485,21.9793 12.1867,22.0013L12.7094,22.3031C12.7475,22.3251 12.7963,22.312 12.8183,22.2739L14.7376,18.9497C14.7596,18.9115 14.7465,18.8627 14.7084,18.8407L14.1857,18.5389C14.1475,18.5169 14.0987,18.53 14.0767,18.5681L12.1575,21.8923Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="0.9333s" />   
</path>
</g>

<g id="9">
<path opacity="0.2" d="M9.72613,19.1817C9.68797,19.2037 9.6749,19.2525 9.69693,19.2906L9.9987,19.8133C10.0207,19.8515 10.0695,19.8645 10.1077,19.8425L13.4319,17.9233C13.47,17.9013 13.4831,17.8525 13.4611,17.8143L13.1593,17.2916C13.1373,17.2535 13.0885,17.2404 13.0503,17.2624L9.72613,19.1817Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="1.0666s" />    
</path>
</g>

<g id="10">
<path opacity="0.2" d="M8.97584,15.6185C8.93178,15.6185 8.89607,15.6542 8.89607,15.6982L8.89607,16.3018C8.89607,16.3458 8.93178,16.3815 8.97584,16.3815L12.8143,16.3815C12.8583,16.3815 12.8941,16.3458 12.8941,16.3018L12.8941,15.6982C12.8941,15.6542 12.8583,15.6185 12.8143,15.6185L8.97584,15.6185Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="1.1999s" />      
</path>
</g>

<g id="11">
<path opacity="0.2" d="M10.1077,12.1575C10.0695,12.1355 10.0207,12.1485 9.9987,12.1867L9.69693,12.7094C9.6749,12.7475 9.68797,12.7963 9.72613,12.8183L13.0503,14.7376C13.0885,14.7596 13.1373,14.7465 13.1593,14.7084L13.4611,14.1857C13.4831,14.1475 13.47,14.0987 13.4319,14.0767L10.1077,12.1575Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="1.3332s" />     
</path>
</g>

<g id="12">
<path opacity="0.2" d="M12.8183,9.72613C12.7963,9.68797 12.7475,9.6749 12.7094,9.69693L12.1867,9.9987C12.1485,10.0207 12.1355,10.0695 12.1575,10.1077L14.0767,13.4319C14.0987,13.47 14.1475,13.4831 14.1857,13.4611L14.7084,13.1593C14.7465,13.1373 14.7596,13.0885 14.7376,13.0503L12.8183,9.72613Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.6s" repeatCount="indefinite" begin="1.4665s" />     
</path>
</g>
</g>
</g>
</svg>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<g id="spinner">

<g id="1">
<path opacity="0.2" d="M16.3815,8.97584C16.3815,8.93178 16.3458,8.89607 16.3018,8.89607L15.6982,8.89607C15.6542,8.89607 15.6185,8.93178 15.6185,8.97584L15.6185,12.8143C15.6185,12.8583 15.6542,12.8941 15.6982,12.8941L16.3018,12.8941C16.3458,12.8941 16.3815,12.8583 16.3815,12.8143L16.3815,8.97584Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" />
</path>
</g>

<g id="2">
<path opacity="0.2" d="M19.8425,10.1077C19.8645,10.0695 19.8515,10.0207 19.8133,9.9987L19.2906,9.69693C19.2525,9.6749 19.2037,9.68797 19.1817,9.72613L17.2624,13.0503C17.2404,13.0885 17.2535,13.1373 17.2916,13.1593L17.8143,13.4611C17.8525,13.4831 17.9013,13.47 17.9233,13.4319L19.8425,10.1077Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1s" />   
</path>
</g>

<g id="3">
<path opacity="0.2" d="M22.2739,12.8183C22.312,12.7963 22.3251,12.7475 22.3031,12.7094L22.0013,12.1867C21.9793,12.1485 21.9305,12.1355 21.8923,12.1575L18.5681,14.0767C18.53,14.0987 18.5169,14.1475 18.5389,14.1857L18.8407,14.7084C18.8627,14.7465 18.9115,14.7596 18.9497,14.7376L22.2739,12.8183Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2s" />   
</path>
</g>

<g id="4">
<path opacity="0.2" d="M23.0242,16.3815C23.0682,16.3815 23.1039,16.3458 23.1039,16.3018L23.1039,15.6982C23.1039,15.6542 23.0682,15.6185 23.0242,15.6185L19.1857,15.6185C19.1417,15.6185 19.1059,15.6542 19.1059,15.6982L19.1059,16.3018C19.1059,16.3458 19.1417,16.3815 19.1857,16.3815L23.0242,16.3815Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.3s" />   
</path>
</g>

<g id="5">
<path opacity="0.2" d="M21.8923,19.8425C21.9305,19.8645 21.9793,19.8515 22.0013,19.8133L22.3031,19.2906C22.3251,19.2525 22.312,19.2037 22.2739,19.1817L18.9497,17.2624C18.9115,17.2404 18.8627,17.2535 18.8407,17.2916L18.5389,17.8143C18.5169,17.8525 18.53,17.9013 18.5681,17.9233L21.8923,19.8425Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" />   
</path>
</g>

<g id="6">
<path opacity="0.2" d="M19.1817,22.2739C19.2037,22.312 19.2525,22.3251 19.2906,22.3031L19.8133,22.0013C19.8515,21.9793 19.8645,21.9305 19.8425,21.8923L17.9233,18.5681C17.9013,18.53 17.8525,18.5169 17.8143,18.5389L17.2916,18.8407C17.2535,18.8627 17.2404,18.9115 17.2624,18.9497L19.1817,22.2739Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5s" />   
</path>
</g>

<g id="7">
<path opacity="0.2" d="M15.6185,23.0242C15.6185,23.0682 15.6542,23.1039 15.6982,23.1039L16.3018,23.1039C16.3458,23.1039 16.3815,23.0682 16.3815,23.0242L16.3815,19.1857C16.3815,19.1417 16.3458,19.1059 16.3018,19.1059L15.6982,19.1059C15.6542,19.1059 15.6185,19.1417 15.6185,19.1857L15.6185,23.0242Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6s" />   
</path>
</g>

<g id="8">
<path opacity="0.2" d="M12.1575,21.8923C12.1355,21.9305 12.1485,21.9793 12.1867,22.0013L12.7094,22.3031C12.7475,22.3251 12.7963,22.312 12.8183,22.2739L14.7376,18.9497C14.7596,18.9115 14.7465,18.8627 14.7084,18.8407L14.1857,18.5389C14.1475,18.5169 14.0987,18.53 14.0767,18.5681L12.1575,21.8923Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.7s" />   
</path>
</g>

<g id="9">
<path opacity="0.2" d="M9.72613,19.1817C9.68797,19.2037 9.6749,19.2525 9.69693,19.2906L9.9987,19.8133C10.0207,19.8515 10.0695,19.8645 10.1077,19.8425L13.4319,17.9233C13.47,17.9013 13.4831,17.8525 13.4611,17.8143L13.1593,17.2916C13.1373,17.2535 13.0885,17.2404 13.0503,17.2624L9.72613,19.1817Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" />    
</path>
</g>

<g id="10">
<path opacity="0.2" d="M8.97584,15.6185C8.93178,15.6185 8.89607,15.6542 8.89607,15.6982L8.89607,16.3018C8.89607,16.3458 8.93178,16.3815 8.97584,16.3815L12.8143,16.3815C12.8583,16.3815 12.8941,16.3458 12.8941,16.3018L12.8941,15.6982C12.8941,15.6542 12.8583,15.6185 12.8143,15.6185L8.97584,15.6185Z" style="fill:black;">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9s" />      
</path>
</g>

<g id="11">
<path opacity="0.2" d="M10.1077,12.1575C10.0695,12.1355 10.0207,12.1485 9.9987,12.1867L9.69693,12.7094C9.6749,12.7475 9.68797,12.7963 9.72613,12.8183L13.0503,14.7376C13.0885,14.7596 13.1373,14.7465 13.1593,14.7084L13.4611,14.1857C13.4831,14.1475 13.47,14.0987 13.4319,14.0767L10.1077,12.1575Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1s" />     
</path>
</g>

<g id="12">
<path opacity="0.2" d="M12.8183,9.72613C12.7963,9.68797 12.7475,9.6749 12.7094,9.69693L12.1867,9.9987C12.1485,10.0207 12.1355,10.0695 12.1575,10.1077L14.0767,13.4319C14.0987,13.47 14.1475,13.4831 14.1857,13.4611L14.7084,13.1593C14.7465,13.1373 14.7596,13.0885 14.7376,13.0503L12.8183,9.72613Z" style="fill:black;">
 <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.1s" />     
</path>
</g>
</g>
</g>
</svg>

1
  • yep thats the problem, the duration wasn't long enough. Setting it to 1.5 looks much better - thx!
    – avater
    Commented Dec 10, 2014 at 12:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.