Translate and scale animation issue

Question

@keyframes my-animation { 
    0% { 
     transform: translate(0, 40%) scale(0); 
    } 
    10% { 
     transform: scale(1.1); 
    } 
    20% { 
     transform: scale(1); 
    } 
    100% { 
     transform: translateY(0%); 
    } 
} 

Я пытаюсь сделать мой элемент pop, а затем двигаться по оси Y, но выше не работает.

Куда я иду не так?

Answer 1

Свойство Transform переопределяется во время анимации. Таким образом, хотя ключевой кадр в 0% говорит, что перевод на 40% по оси Y, второй кадр с 10% сводит на нет его. Существует движение между 0% и 10%, но это почти незаметно, потому что элемент только что появляется.

Вам необходимо сохранить translate(0, 40%) до момента, когда элемент должен оставаться переведенным на 40% по оси Y. В нижеприведенном фрагменте я сохранил его в переведенном состоянии до 20% продолжительности анимации, а затем между 20% и 100% он возвращается в исходное положение.

@keyframes my-animation { 
 
    0% { 
 
     transform: translate(0, 40%) scale(0); 
 
    } 
 
    10% { 
 
     transform: translate(0, 40%) scale(1.1); 
 
    } 
 
    20% { 
 
     transform: translate(0, 40%) scale(1); 
 
    } 
 
    100% { 
 
     transform: translateY(0%); 
 
    } 
 
} 
 
div{ 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid; 
 
    animation: my-animation 4s linear forwards; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div>Some</div>