<header id="main" class="animation">
  <img class="character1" src="https://www.w3cplus.com/sites/default/files/blogs/2022/2208/character-pink-girl.png">
  <img class="character2" src="https://www.w3cplus.com/sites/default/files/blogs/2022/2208/character-cat-girl.png">
</header>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  color: #fff;
  display: grid;
  gap: 1rem;
}

:root {
  --grass: url("https://www.w3cplus.com/sites/default/files/blogs/2022/2208/grass-block.png");
  --rock: url("https://www.w3cplus.com/sites/default/files/blogs/2022/2208/rock.png");
  --tree-short: url("https://www.w3cplus.com/sites/default/files/blogs/2022/2208/tree-short.png");
  --tree-tall: url("https://www.w3cplus.com/sites/default/files/blogs/2022/2208/tree-tall.png");
  --sky: linear-gradient(to bottom, #2b8ce7, #73b9f5);
}

header {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background-image: var(--rock), var(--tree-short), var(--tree-short),
    var(--tree-tall), var(--tree-tall), var(--grass), var(--sky);
  background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom,
    left top;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-x;

  animation: move 3s ease 1;
}
.character1 {
  position: absolute;
  left: 110%;
  top: 50%;
  transition: left 0.5s ease-in-out;
}

.character2 {
  position: absolute;
  left: 10%;
  top: 110%;
  transition: top 1.5s ease-in-out;
}

header:hover .character1 {
  left: 90%;
}

header:hover img.character2 {
  top: 50%;
}
@keyframes move {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, left bottom, left top;
  }
  100% {
    background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%,
      left bottom, left top;
  }
}