<div class="smena_kartinok">
  <div class="sobrazhenia_1">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/zorten-1.jpg" />
  </div>
  <div class="sobrazhenia_2">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/zorten-2.jpg" />
  </div>
</div>

.smena_kartinok {
  max-width: 392px;
  width: 100%;
  margin: 18px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(37 37 37 / 20%), 0 16px 20px rgba(37 37 37 / 20%);
}
.smena_kartinok img {
  width: 100%;
  box-shadow: 0 4px 12px rgb(37 37 37 / 20%), 0 16px 20px rgb(37 37 37 / 20%);
}
.smena_kartinok .sobrazhenia_1 {
  position: relative;
  animation: rotate 10s linear 5s infinite;
}
.smena_kartinok .sobrazhenia_2 {
  position: absolute;
  top: 0;
  animation: rotate 10s linear infinite;
}
@keyframes rotate {
  0% {
  opacity: 1;
  transform: rotate(0) scale(1);
  }
  40% {
  transform: rotate(0) scale(1);
  opacity: 1;
  }
  49.99999% {
  transform: rotate(45deg) scale(3);
  opacity: 0;
  z-index: 1;
  }
  50% {
  transform: rotate(0) scale(1);
  opacity: 0;
  z-index: -1;
  }
  100% {
  opacity: 1;
  transform: rotate(0) scale(1);
  z-index: -1;
  }
}