css3 pulse effect delay - css

Question

Hello I have a button that pulses in css3 (works great) what I want it to do is pulse every 12sec...how can I do this?
.pulse {
animation-name: pulse_animation;
animation-duration: 10000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes pulse_animation {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}

Answer 1

I have set the duration to 3sec to let you see exactly how does it work. You can freely adjust the duration by urself. Just change 3s into 12s.
https://jsfiddle.net/bL164jj8/
.pulse {
animation-name: pulse_animation;
animation-duration: 3s;
transform-origin: 70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
height: 100px;
width: 100px;
background-color: lightblue;
}
#keyframes pulse_animation {
0% {
transform: scale(1);
}
8% {
transform: scale(1.01);
}
16% {
transform: scale(1.02);
}
24% {
transform: scale(1.03);
}
32% {
transform: scale(1.04);
}
40% {
transform: scale(1.05);
}
50% {
transform: scale(1.06);
}
58% {
transform: scale(1.05);
}
66% {
transform: scale(1.04);
}
74% {
transform: scale(1.03);
}
82% {
transform: scale(1.02);
}
90% {
transform: scale(1.01);
}
100% {
transform: scale(1);
}
}
<div class='pulse'>
</div>