Не работает @keyframes в СSS

Создал анимацию @keyframes, которая должна сначала переместить квадрат (сlass="one1") вверх на 200px, после чего растянуть его width до 500px и остаться в положении последнего кадра (растянутый прямоугольник шириной 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; } }
Но результат отличается от задуманного, вот: https://codepen.io/Nastromo/pen/MoxOva. Не могу понять почему. Помогите, пожалуйста, достичь желаемой анимации. Заранее благодарю, всех кто заинтересуется.

Ответ

Анимируемые значения интерполируются во всех точках, если они там не заданы. Чтобы получить желаемое поведение (сначала перемещение, а потом растяжение), надо прописать оба свойства в анимации:
@keyframes rising { 0% { width: 200px; transform: translate(0); } 50% { width: 200px; transform: translateY(-200px); } 100% { width: 500px; transform: translateY(-200px); } }