after animation

by murgiaMarco

HTML

<p id='change'>
This text will change when the animation has ended.
</p>
<circle></circle>

CSS

circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,255,0.9);
  border: 2px solid black;
  position: absolute;
  
  animation: bounce 1.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-fill-mode: forwards;
  
  -webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
  
}

@keyframes bounce {
  from {
    transform: rotate3d(0,1, 0, 0deg)  ;
  }
  to {
    transform: rotate3d(0, 1, 0,-180deg) ;
  }
}

body{
  perspective: 1000px;
}

JavaScript

var circle = document.getElementsByTagName("circle")[0];
var change = document.getElementById("change");

circle.addEventListener("animationend", function() {
		change.innerHTML = "The animation has ended!";
});