CSS opacity control onclick

[admin]

It's not possible to do this without JavaScript. Animation will work only until the mouse button is released. So only very short animations can be done this way.

JavaScript:

Code:

$(function() {
  $('body').on('click touchstart', '.item-control', function() {
    this.classList.remove('active');
    this.offsetHeight;
    this.classList.add('active');
  });
});

CSS:

Code:

.item-control.active {
  animation: clickanim 3s ease-out;
}

@keyframes clickanim {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}