css3 - CSS + SVG Infinite animation with a delay between each iteration -

i have code here shows animation check-mark.

it works problem that, doesn't loop. animates 1 time. want animate every 2 seconds.

codepen link: http://codepen.io/haniotis/pen/kwvylo

css looks this:

@import "bourbon";  $color--green: #7ac142; $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);  .checkmark__circle {   stroke-dasharray: 166;   stroke-dashoffset: 166;   stroke-width: 2;   stroke-miterlimit: 10;   stroke: $color--green;   fill: none;   animation: stroke .6s $curve forwards; }  .checkmark {   width: 56px;   height: 56px;   border-radius: 50%;   display: block;   stroke-width: 2;   stroke: #fff;   stroke-miterlimit: 10;   margin: 10% auto;   box-shadow: inset 0px 0px 0px $color--green;   animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }  .checkmark__check {   transform-origin: 50% 50%;   stroke-dasharray: 48;   stroke-dashoffset: 48;   animation: stroke .3s $curve .8s forwards; }  @keyframes stroke {   100% {     stroke-dashoffset: 0;   } }  @keyframes scale {   0%, 100% {     transform: none;   }   50% {     transform: scale3d(1.1, 1.1, 1);   } }  @keyframes fill {   100% {     box-shadow: inset 0px 0px 0px 30px $color--green;   } } 

html looks this:

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 52 52">   <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />   <path class="checkmark__check" fill="none" d="m14.1 27.2l7.1 7.2 16.7-16.8" /> </svg> 

note: though question partly similar 1 had linked in comments, bit complex due presence of multiple animations need chained , hence adding separate answer explain it.

making css3 animation run infinite number of times simple. can achieved setting animation-iteration-count infinite. making animation repeat every [x] seconds lot more complex because explained in answer here, animation-delay property adds delay before first iteration of animation , not before each , every single iteration.

that answer explains how add delay between each iteration , wouldn't go more details that. case bit more complex because there 4 animations chained produce effect , of them need modified make work.

the following things need make repeat every 2 seconds infinitely:

• add animation-iteration-count: infinite 4 animations (or) add infinite keyword animation shorthand properties.
• firstly calculate total amount of time entire animation (all 4 put together) runs. in original snippet running 1.2s , needed delay of 2s, total duration animation 3.2s. this 3.2s should made duration 4 animations.
• the animation on .checkmark__circle supposed run .6s , had no delay. .6s 18.75% of 3.2s , animation's keyframes should changed entire animation completed @ 18.75% mark , stays way till 100% mark.
• the animation on .checkmark__check supposed have delay of .8s 25% of 3.2s duration. should start @ 25% mark , duration .3s 9.37% of 3.2s. so, animation should start @ 25% mark , complete time reaches 34.37% mark. there on till 100% mark, must hold state. since, keyframes different circle animation, need add 2 different @keyframes rules.
• the fill animation on .checkmark has .4s duration , same delay. so, should start @ 12.5% mark, complete @ 25% mark , stay way till 100% mark.
• the scale animation on .checkmark has .3s duration , .9s delay. so, must start @ 28.125% mark , complete 37.5% mark. means mid point (by should transform: scale3d(1.1, 1.1, 1); @ 32.8125% mark.

once these changes done, animation run infinitely delay of 2 seconds between each loop. below demo using compiled css. scss version available here.

.checkmark__circle {    stroke-dasharray: 166;    stroke-dashoffset: 166;    stroke-width: 2;    stroke-miterlimit: 10;    stroke: #7ac142;    fill: none;    animation: stroke 3.2s cubic-bezier(0.65, 0, 0.45, 1) forwards infinite;  }  .checkmark {    width: 56px;    height: 56px;    border-radius: 50%;    display: block;    stroke-width: 2;    stroke: #fff;    stroke-miterlimit: 10;    margin: 10% auto;    box-shadow: inset 0px 0px 0px #7ac142;    animation: fill 3.2s ease-in-out forwards infinite, scale 3.2s ease-in-out both infinite;  }  .checkmark__check {    transform-origin: 50% 50%;    stroke-dasharray: 48;    stroke-dashoffset: 48;    animation: stroke-check 3.2s cubic-bezier(0.65, 0, 0.45, 1) forwards infinite;  }  @keyframes stroke {    18.75%, 100% {      stroke-dashoffset: 0;    }  }  @keyframes stroke-check {    25% {      stroke-dashoffset: 48;    }    34.37%,    100% {      stroke-dashoffset: 0;    }  }  @keyframes scale {    0%, 28.125%, 37.5%, 100% {      transform: none;    }    32.8125% {      transform: scale3d(1.1, 1.1, 1);    }  }  @keyframes fill {    12.5% {      box-shadow: inset 0px 0px 0px #7ac142;    }    25%,    100% {      box-shadow: inset 0px 0px 0px 30px #7ac142;    }  }

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 52 52">    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />    <path class="checkmark__check" fill="none" d="m14.1 27.2l7.1 7.2 16.7-16.8" />  </svg>