There is css animation which named 'for_box2' does not work correnctly

Question

How you see in code my span after 'opacity:0 and rotate()' goes up, then it have to 'scale and opacity: 0' and after that go to down. But it does not goes like that, it quickly before 'scale and opacity' goes down.

Just look at how it works I don't have many experience with animations but I can not understand, that code have to work properly. But it lose its direction The link in my commentary

@keyframes for_box2 {
    0% {
        opacity: 1;
    }
    3% {
        opacity: .5;
    }
    5% {
        opacity: .2;
        transform: rotateY(90deg);
    }
    8% {
        opacity: 0;
        transform: rotateY(180deg);
    }
    10% {
        transform: translateY(-50%);
    }
    12% {
        transform: translateY(-100%);
    }
    14% {
        transform: translateY(-150%);
    }
    16% {
        transform: translateY(-200%);
    }
    18% {
        transform: scale(.95);
    }
    20% {
        transform: scale(1);
    }
    22% {
        transform: scale(1.25);
    }
    24% {
        transform: scale(1.1);
    }
    26% {
        transform: scale(1);
        opacity: .8;
    }
    28% {
        opacity: .5;
        transform: rotateY(90deg);
    }
    30% {
        opacity: .2;
        transform: rotateY(120deg)
    }
    32% {
        opacity: 0;
        transform: rotateY(180deg)
    }
    40% {
        animation-timing-function: ease-out;
        transform: translateX(-50%);
        transform: rotateY(180deg);
    }
    48% {
        transform: translateX(-120%);
    }
    56% {
        opacity: 1;
        transform: rotateY(0deg);
    }
    64% {
        opacity: 0;
        transform: rotateY(180deg);
    }
    72% {
        transform: translateY(-200%);
        animation-timing-function: cubic-bezier(.01,1.42,.02,1);
    }
    80% {
        opacity: 1;
        transform: rotateY(0deg);
    }
    88% {
        opacity: 0;
        transform: rotateY(180deg);
    }
    94% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(.01,1.42,.02,1);
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

https://codepen.io/babken-asryan/pen/XvbdXB

Answer 1

You need to put all the transformation in the same transform or you will simply override them:

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  box-sizing: border-box;
}

.wrapper {
  transition: .7s;
  border: solid #357ae8;
  transform: rotate(-.5deg);
  padding: 0 !important;
}


.wrapper .inside {
  background: linear-gradient(288deg, rgba(233, 26, 93, 0.8883928571428571) 0%, rgba(255, 241, 29, 0.9220063025210083) 36%, rgba(231, 235, 70, 1) 51%, rgba(255, 247, 117, 1) 68%, rgba(156, 233, 247, 0.9472163865546218) 91%);
  border: solid #357ae8;
  background-size: 400% 400%;
  transform: rotate(.5deg);
  display: block;
  width: 350px;
  height: 500px;
  animation: Gradient 15s ease infinite;
}

.wrapper .inside span {
  display: block;
  width: 40%;
  height: 30%;
  position: absolute;
}


.wrapper .inside span.box2 {
  bottom: 5%;
  right: 5%;
  background: url('https://svgur.com/i/EAo.svg') no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  animation: for_box2 linear 45s 1s infinite;
}


@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes for_box2 {
  0% {
    opacity: 1;
  }
  3% {
    opacity: .5;
  }
  5% {
    opacity: .2;
    transform: translateX(0) translateY(0) rotateY(90deg);
  }
  8% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotateY(180deg);
  }
  10% {
    transform: translateX(0) translateY(-50%) rotateY(180deg);
  }
  12% {
    transform: translateX(0) translateY(-100%) rotateY(180deg);
  }
  14% {
    transform: translateX(0) translateY(-150%) rotateY(180deg);
  }
  16% {
    transform: translateX(0)translateY(-200%) rotateY(180deg);
  }
  18% {
    transform: translateX(0) translateY(-200%) rotateY(180deg) scale(.95);
  }
  20% {
    transform: translateX(0) translateY(-200%) rotateY(180deg) scale(1);
  }
  22% {
    transform: translateX(0) translateY(-200%) rotateY(180deg) scale(1.25);
  }
  24% {
    transform: translateX(0) translateY(-200%) rotateY(180deg) scale(1.1);
  }
  26% {
    transform: translateX(0) translateY(-200%) rotateY(180deg) scale(1);
    opacity: .8;
  }
  28% {
    opacity: .5;
    transform: translateX(0) translateY(-200%) rotateY(90deg);
  }
  30% {
    opacity: .2;
    transform: translateX(0) translateY(-200%) rotateY(120deg);
  }
  32% {
    opacity: 0;
    transform: translateX(0) translateY(-200%)rotateY(180deg);
  }
  40% {
    animation-timing-function: ease-out;
    transform: translateX(-50%) translateY(-200%) rotateY(180deg);
  }
  48% {
    transform: translateX(-120%) translateY(-200%) rotateY(180deg);
  }
  56% {
    opacity: 1;
    transform: translateX(-120%) translateY(-200%) rotateY(0deg);
  }
  64% {
    opacity: 0;
    transform: translateX(-120%) translateY(-200%) rotateY(180deg);
  }
  72% {
    transform: translateX(-120%) translateY(-200%) rotateY(180deg);
    animation-timing-function: cubic-bezier(.01, 1.42, .02, 1);
  }
  80% {
    opacity: 1;
    transform: translateX(-120%) translateY(-200%) rotateY(0deg);
  }
  88% {
    opacity: 0;
    transform: translateX(-120%) translateY(-200%) rotateY(180deg);
  }
  94% {
    transform: translateX(-120%) translateY(0) rotateY(180deg);
    animation-timing-function: cubic-bezier(.01, 1.42, .02, 1);
  }
  100% {
    transform: translateX(-120%) translateY(0) rotateY(0deg);
    opacity: 1;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>
  <div class="container-fluid mt-5">
    <div class="row d-flex justify-content-around">
      <div class="d-inline-flex p-2 wrapper">
        <div class="d-inline-flex p-2 inside">
          <span class="box2"></span>
        </div>
      </div>
    </div>