<img class="ninja1" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
    <img class="ninja2" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
    <img class="ninja3" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">

img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.ninja1, .ninja2, .ninja3 {
  transition-property: transform;
  transition-duration: 2s;
}

.ninja1:hover {
  transform: translateY(50px);
}

.ninja2:hover {
  transform: scale(1.5);
}

.ninja3:hover {
  transform: rotate(45deg);
}

@keyframes weirdAnim {
  0% { transform: translateY(0); }
  11% { 
    width: 50px;
    background-color: green; 
    transform: rotate(90deg);
  }
  50% { height: 100px;}
  66% { transform: rotate(-720deg); }
  99% { 
    border-radius: 200px;
    background-color: black;
  }
  100% { 
    background-color: red;
  }
}
.ninja1{
  animation-name: weirdAnim;
  animation-duration: 5s;
}