CSS Blink with pause animation effect
CSS Blink with pause animation
The CSS blink with pause animation effect can be achieved using the CSS property opacity. Change the animation duration, for faster or slower blinking speed. See our blink CSS animation for a simple blink effect without a pause in between frames.
<style>
.blink-with-pause {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: blink-with-pause;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes blink-with-pause {
0% { opacity:0; }
15% { opacity:1; }
30% { opacity:0; }
42% { opacity:1; }
60% { opacity:0; }
/* Pause starts here, increase
the pause duration by changing
the values as needed */
65% { opacity:1; }
100% { opacity:1; }
}
</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence