Jquery or CSS - How to create an animation that flashes back to the original?

Question

Jquery or CSS - How to create an animation that flashes back to the original?

Navigation

#1 by (3 votes)

1

I have the following Jquery code:

$(".add").click(function(e) {
    $(".saida").addClass("backgroundRed");
});

and the following css:

.backgroundRed {
    color: #FFF;
    background: #c1272d;
}

It's all right, it changes the color of the div when I change the class but I want it to change the color of the div for 3seconds and then return to the previous color, how do I do that?

jquery css

asked by anonymous 08.02.2017 / 01:51

1 answer

JavaScript Validates Date of Birth and Block Same Year Push in JSON Object AngularJS

score 3 · Accepted Answer

I made a method that works using CSS3 Animation:

$(".add").click(function(e) {
    $(".saida").addClass("backgroundRed");
    setTimeout(function() { $(".saida").removeClass("backgroundRed"); }, 3500);
});

.saida {
  padding: 16px;
  margin-top: 16px;
}

.backgroundRed {
    animation: fundoVermelho 3.5s;
}

@keyframes fundoVermelho {
  0% { background: transparent; color: #333;}
  33% { background: #c1272d; color: #FFF; }
  85% { background: #c1272d; color: #FFF; }
  100% { background: transparent; color: #333; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonclass="add">Teste</button>

<div class="saida">SAÍDA</div>