train passing checkpoint animation

CSS only

by Ercan Cicek

HTML

<div class="box-area">
  <img src="https://i.postimg.cc/3JWq4q69/gate.png" alt="" class="gate-img">
  <img src="https://i.postimg.cc/X7TsZY97/gate-back.png" alt="" class="gate-back-img">
  <img src="https://i.postimg.cc/HsLq0nJw/train.png" alt="" class="train-img">
</div>

SCSS

$boxWidth: 400px;

.box-area {
  position: relative;
  width: $boxWidth;
  height: $boxWidth / 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 3px solid #efefef;
  overflow: hidden;
  >img {
    position: absolute;
    right: 0;
    width: 100%;

    &.gate-img {
      z-index: 1;
    }

    &.train-img {
      animation: train-moving 3s linear 1s 1;
      right: -100%;
      top: 50%;
      transform: translateY(-58%);
      z-index: 2;
    }

    &.gate-back-img {
      z-index: 3;
    }
  }
}

@-webkit-keyframes train-moving {
  from {
    right: -100%;
  }

  to {
    right: 200%;
  }
}

@keyframes train-moving {
  from {
    right: -100%;
  }

  to {
    right: 200%;
  }
}