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

Asked

Viewed 1,412 times

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, he changes the color of the div when I change the class but I want him to change the color of the div for 3 seconds and then return the previous color, how do I do it ?

jquery css

1 answer

3


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>
<button class="add">Teste</button>

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

  • vlw!!!!!!!!!!!!!

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.