.img-rotation {
  animation: rotation 3s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.img-rotation-inverse {
  animation: rotationBack 3s linear infinite;
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.img-roll {
  position: relative;
  animation: roll 2s ease-in-out infinite alternate;
}

.img-roll:after {
  position: absolute;
}

@keyframes roll {
  0% {
    transform: translateX(-50%) rotate(0deg) ;
  }
  100% {
    transform:  translateX(50%) rotate(360deg);
  }
}

.img-heart-beat {
  position: relative;
  animation: heartBeat 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.img-heart-beat:before,
.img-heart-beat:after {
  position: absolute;
  transform: rotate(45deg);
  transform-origin: 50% 68%;
}

.img-heart-beat:after {
  transform: rotate(-45deg);
}

@keyframes heartBeat {
  0% { transform: scale(0.95) }
  5% { transform: scale(1.1) }
  39% { transform: scale(0.85) }
  45% { transform: scale(1) }
  60% { transform: scale(0.95) }
  100% { transform: scale(0.9) }
}

.img-animloader {
  animation: animloader 1.3s linear infinite;
}

.img-animloader::after {
  transform: rotate(-45deg);
  position: absolute;
}

@keyframes animloader {
  0% {
    transform: translate(-10px, -10px);
  }
  25% {
    transform: translate(-10px, 10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(-10px, -10px);
  }
}

.img-loader {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: flipX 2s linear infinite;
}

@keyframes flipX {
  0% {
    transform:  rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(-180deg) rotateY(0deg);
  }
  100% {
    transform:  rotateX(-180deg) rotateY(-180deg);
  }
}