.card {
  position: relative;
  display:flex;
  width: 100%;
  height:100%;
  overflow: hidden;
  margin:auto;
}

.card img {
  margin: auto;
  height: 100%;
  width: auto;
  box-sizing: border-box;
  object-fit: contain;
  max-width: 100%;
  display:inline-block;
  position:relative;
}

.card:hover, .card_part:hover{
	animation-play-state: paused;
}
.card_part.card_part-two, .card_part.card_part-three, .card_part.card_part-four, .card_part.card_part-five, .card_part.card_part-six, .card_part.card_part-seven, .card_part.card_part-eight, .card_part.card_part-nine, .card_part.card_part-one {
	animation-play-state: inherit;
}

.card_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin:auto;
  display: flex;
  align-items: center;
  width: 100%;
  height:100%;
  transform: translateX( 600% );
  background-repeat:no-repeat;
  animation: opaqTransition 54s cubic-bezier(0.1, 0, 0.2, 0.9) infinite;
}

.card_part.card_part-one {
  z-index: 2;
	animation-delay:0s;
}

.card_part.card_part-two {
  z-index: 3;
  animation-delay: 6s;
}

.card_part.card_part-three {
    z-index: 4;
  animation-delay: 12s;
}

.card_part.card_part-four {
    z-index: 5;
  animation-delay: 18s;
}

.card_part.card_part-five {
    z-index: 6;
  animation-delay: 24s;
}

.card_part.card_part-six {
    z-index: 7;
  animation-delay: 30s;
}

.card_part.card_part-seven {
    z-index: 8;
  animation-delay: 36s;
}

.card_part.card_part-eight {
    z-index: 9;
  animation-delay: 42s;
}

.card_part.card_part-nine {
    z-index: 10;
  animation-delay: 48s;
}


@keyframes opaqTransition {
  3% { transform: translateX( 0 );}
  12% { transform: translateX( 0 ); opacity: 100%;}
  20% {opacity: 0%;}
  32% { transform: translateX( -700% );}
  100% { transform: translateX( -700% ); opacity: 0%;}
}