Remove background color slowly and only once

Question

It's need to be like by new messages- by hover (see css below) it's background will slowly disappear, but it can be only once, that is why i need to remove this additional class e.g. "newmessage" which gives this background, but if i remove this class by hover- i haven't this slow effect...

.newmessage {
  background-color: rgba(213, 213, 213, 1);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
.newmessage:hover {
  background-color: rgba(213, 213, 213, 0);
}

Can you also post the HTML element you are applying this class to? — AGE, Oct 07 '15 at 17:49

score 2 · Accepted Answer · answered Oct 07 '15 at 18:59

You can add a class that applies the style rule when the element is hovered using JavaScript. It will only add it once, causing the element's style to transition. Updated version of your fiddle

DEMO

var newMessages = document.querySelectorAll('.newmessage');


for (var i = 0, l = newMessages.length; i < l; i++) {
    //added the .hovered class on mouseover
    newMessages[i].addEventListener('mouseover', function() {
        this.classList.add('hovered');
    });
}

div {
    background-color: gray;
    height: 50px;
    width: 200px;
    margin-bottom: 5px;
}
.newmessage {
  background-color: rgba(220, 55, 55, 1);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
/* instead of .newmessage:hover, use additional class */
.newmessage.hovered {
  background-color: rgba(220, 55, 55, 0);
}

<div></div>
<div></div>
<div class="newmessage"></div>

score 0 · Answer 2 · edited May 23 '17 at 11:48

What you're looking for is to execute a callback once the trasition is over to remove the class.

Is there a callback on completion of a CSS3 animation?

Yes, there is. The callback is an event, so you must add an event listener to catch it. This is an example with jQuery:
$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});
Or pure js:
element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);
Live demo: http://jsfiddle.net/W3y7h/

Credits to @Duopixel

In your case, you might have to go with transitionend instead of animationend.

Remove background color slowly and only once

2 Answers2