JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<div class="test" data-copied-text="Скопировано!">
  Скопировать
</div>

CSS

.test {
  position: relative;
  padding: 10px;
  margin-top: 50px;
}

.copied::before {
  content: attr(data-copied-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: inherit;
  animation: copiedDisappear 1s ease-out 0s 1 normal forwards;
  animation-fill-mode: forwards;
  pointer-events: none;
  color: green;
}

@keyframes copiedDisappear {
  0% {
    opacity: 1;
    transform: translateY(-10%);
  }
  
  70% {
    opacity: .6;
  }

  100% {
    opacity: 0;
    transform: translateY(-60%);
  }
}

JavaScript

document.querySelector(".test").addEventListener('click', function () {
	this.classList.add('copied');
})

document.querySelector(".test").addEventListener('animationend', function(event) {
	console.log(event.animationName);
	this.classList.remove('copied');
})