Post
Ask Question

Add Blinking Effect to Your Website

  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="scripts/jquery-2.1.4.js"></script>  
  7.     <script src="scripts/jquery_ui_custom/jquery-ui.js"></script>  
  8.     <link href="scripts/jquery_ui_custom/jquery-ui.css" rel="stylesheet" />  
  9.     <style type="text/css">  
  10.         @keyframes blinknCSS {  
  11.             from {  
  12.                 background-color: white;  
  13.             }  
  14.   
  15.             to {  
  16.                 background-color: greenyellow;  
  17.             }  
  18.         }  
  19.   
  20.         #blinkMeC {  
  21.             width: 200px;  
  22.             height: 100px;  
  23.             background-color: white;  
  24.             animation-name: blinknCSS;  
  25.             animation-duration: 1s;  
  26.             animation-iteration-count: infinite;  
  27.             animation-direction: alternate;  
  28.             animation-timing-function: linear; 
  29.              -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
  30.         }  
  31.   
  32.         #blinkMeJ {  
  33.             width: 200px;  
  34.             height: 100px;  
  35.             background-color: #FFFFFF;  
  36.         }  
  37.     </style>  
  38.     <script type="text/javascript">  
  39.         function blinky() {  
  40.             $("#blinkMeJ").animate({ "background-color": "#8beb4f" }, 2000, "linear", function () {  
  41.                 $("#blinkMeJ").animate({ "background-color": "#FFFFFF" }, 2000, "linear");  
  42.             });  
  43.             window.setTimeout(function () { blinky() }, 4444);  
  44.         }  
  45.   
  46.         $(document).ready(function () {  
  47.             blinky();  
  48.         });  
  49.     </script>  
  50. </head>  
  51. <body>  
  52.     <form id="frmBlink" runat="server">  
  53.         BLINKING ANIMATION IN WEB  
  54.         <hr />  
  55.         <div id="blinkMeC">  
  56.             Blinking using CSS  
  57.         </div>  
  58.         <hr />  
  59.         <div id="blinkMeJ">  
  60.             Blinking using Jquery  
  61.         </div>  
  62.         <hr />  
  63.     </form>  
  64. </body>  
  65. </html>  
If you want limited number of blinks:
For CSS:  Change the "animation-iteration-count: " to number of times you want.
For Jquery: Remove the  "window.setTimeout"
 
Note: The Jquery UI script was added because background color animation doesn't work without it.