CSS multiple animation

cheatsheet: animista.net

by Roberto Apasajja

HTML

<img src="https://www.gravatar.com/avatar/a4e64855bb65ad093754ae4e91ddca7f?s=64" alt="">

CSS

img {
	animation: scale-in-and-out 3s both;
}


/**
 * ----------------------------------------
 * animation scale-in-and-out
 * ----------------------------------------
 */
@keyframes scale-in-and-out {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  10% {
    transform: scale(1);
    opacity: 1;
  }
  90% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}