Revisions to How do you make an element "flash" in jQuery

Fixed incorrect background-color of "none" and added a regular `@keyframes` rule.

Source Link

edited Oct 16, 2017 at 23:12

8.9k
6
35
43

You can use css3 animations to flash an element

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: none;transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none;transparent; }
}

@-moz-keyframes flash {
    0% { background-color: none;transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none;transparent; }
}

@-ms-keyframes flash {
    0% { background-color: none;transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none;transparent; }
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

You can use css3 animations to flash an element

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@-webkit-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

@-moz-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

@-ms-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

You can use css3 animations to flash an element

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

cleanup CSS formatting 2

Source Link

edited Oct 26, 2015 at 6:55

Csaba Toth

10.5k
6
80
135

You can use css3 animations to flash an element

.flash{
  {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
  
}

@-webkit-keyframes flash {
    0% { background-color: none; }
    50% { background-color:#fbf8b2;}       #fbf8b2; }
    100% { background-color: none; }
}

@-moz-keyframes flash {
    0% { background-color: none; }
    50% { background-color:#fbf8b2;}       #fbf8b2; }
    100% { background-color: none; }
}

@-ms-keyframes flash {
    0% { background-color: none; }
    50% { background-color:#fbf8b2;}       #fbf8b2; }
    100% { background-color: none; }
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

You can use css3 animations to flash an element

.flash{
  
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
  
}

@-webkit-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

@-moz-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

@-ms-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

You can use css3 animations to flash an element

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@-webkit-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

@-moz-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

@-ms-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

deleted 24 characters in body

Source Link

edited Aug 11, 2012 at 14:56

vinay

3k
2
25
18

You can use css3 animations to flash an element

.flash{
  
  -moz-animation: highlightflash 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: highlightflash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: highlightflash 1s ease-out;
  -ms-animation-iteration-count: 1;
  
}

@-webkit-keyframes highlightflash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

@-moz-keyframes highlightflash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

@-ms-keyframes highlightflash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

You can use css3 animations to flash an element

.flash{
  
  -moz-animation: highlight 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: highlight 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: highlight 1s ease-out;
  -ms-animation-iteration-count: 1;
  
}

@-webkit-keyframes highlight {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

@-moz-keyframes highlight {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

@-ms-keyframes highlight {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

You can use css3 animations to flash an element

.flash{
  
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;
  
  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  
  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
  
}

@-webkit-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

@-moz-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

@-ms-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#fbf8b2;}        
    100% {background-color:none;}
}

And you jQuery to add the class

jQuery(selector).addClass("flash");

Source Link

created Aug 11, 2012 at 14:19

vinay

3k
2
25
18

Loading

Collectives™ on Stack Overflow

Return to Answer