See the easy way to blink an image in html with demo below.
Just add this code in one go below, to make an image blink using CSS (like a slow flash every 2 seconds)
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
<img class="blink-image" src="http://aq.gthex.co.uk:10000/wp-content/uploads/2019/03/codehaven-newblue-logo.png" alt="blink image by css"><style> .blink-image { -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */ -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */ -ms-animation: blink normal 2s infinite ease-in-out; /* IE */ animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */} @-moz-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }} @-webkit-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}/* IE */@-ms-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }} /* Opera and prob css3 final iteration */@keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }} </style>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<img class="blink-image" src="http://aq.gthex.co.uk:10000/wp-content/uploads/2019/03/codehaven-newblue-logo.png" alt="blink image by css"> <style> .blink-image { -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */ -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */ -ms-animation: blink normal 2s infinite ease-in-out; /* IE */ animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */ } @-moz-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } /* IE */ @-ms-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } /* Opera and prob css3 final iteration */ @keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } </style> |
That’s all you need to do to blink image by CSS.
