I implemented keyframes to create a pulsating effect on text every 15 seconds. This effect works in Chrome but not in Firefox. I'm unsure how to introduce a 15-second delay between each pulse, so I experimented with using more percentages; however, I am uncertain if this approach is correct.
@-webkit-keyframes pulse_animation {
0% { -webkit-transform: scale(1); }
3% { -webkit-transform: scale(1); }
4% { -webkit-transform: scale(1); }
6% { -webkit-transform: scale(1.08); }
8% { -webkit-transform: scale(1); }
...
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse_animation {
0% { -moz-transform: scale(1); }
3% { -moz-transform: scale(1); }
...
100% { -moz-transform: scale(1); }
}
@keyframes pulse_animation {
0% { transform: scale(1); }
3% { transform: scale(1); }
...
100% { transform: scale(1); }
}
.first-visit{
-webkit-animation-name: 'pulse_animation';
-webkit-animation-duration: 18000ms;
-webkit-transform-origin:40% 40%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-moz-animation-name: 'pulse_animation';
-moz-animation-duration: 18000ms;
-moz-transform-origin:40% 40%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
animation-name: 'pulse_animation';
animation-duration: 18000ms;
transform-origin:40% 40%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}