html5 – @Keyframes doesn't work in css

Question:

Created an animation @keyframes, which should first move the square (class = "one1") up by 200px, then stretch its width to 500px and stay in the position of the last frame (stretched rectangle with a width of 500px).

.one1{
  margin-top: 200px;
  animation: rising 1s ease;
  animation-fill-mode: forwards;
}

@keyframes rising {
  0%{
    transform: translate(0);
    }
  50%{
    transform: translateY(-200px);
    }
  100%{
    width: 500px;
  }
}

But the result is different from what was intended, here: https://codepen.io/Nastromo/pen/MoxOva . I can't figure out why. Please help me achieve the desired animation. Thank you in advance, everyone who is interested.

Answer:

Animated values ​​are interpolated at all points if they are not specified there. To get the desired behavior (first moving, and then stretching), you need to register both properties in the animation:

@keyframes rising {
  0% {
    width: 200px;
    transform: translate(0);
  }
  50% {
    width: 200px;
    transform: translateY(-200px);
  }
  100% {
    width: 500px;
    transform: translateY(-200px);
  }
}
Scroll to Top