Transitions

by Raul Bojalil

HTML

<div id="test" class="red-box">
</div>

<div id="test2" class="blue-box">
</div>

CSS

.red-box {
  width: 50px;
  height: 50px;
  background-color: red;
  animation: fadeinout 4s linear forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.blue-box {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.fade-out {
  transition: opacity 3s ease-in-out;
  opacity: 0;
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; transform: translate(30px,0) }
}

JavaScript

const redBox = document.getElementById("test");
const blueBox = document.getElementById("test2");

blueBox.addEventListener("click", () => {
  blueBox.classList.add("fade-out");
});

redBox.addEventListener("animationend", () => {
	redBox.style.display = "none";
  console.log("animationend");
});