Перевод анимации работает некорректно

Question

Я хочу сделать анимацию падения при загрузке страницы, как в рабочем примере, который я видел у кого-то другого, а у меня нет. Изображение не падает вообще, непрозрачность не меняется от 0 до 1. Он просто внезапно появляется по истечении заданного времени. Помогите, пожалуйста.

.cover img{
    height: 60vh;
    filter: drop-shadow(1px 5px 3px black);
    position: relative;
    left: 60px;
    animation: drop 1.5s ease;
}
@keyframes drop{
    0% {
        opacity: 0%;
        transform: translateY(-80px);
    }

    100% {
        opacity: 1%;
        transform: translateY(0px);
    }
}

Answer 1

Я думаю, что вы сделали неправильно, это процент непрозрачности. Вам просто нужен номер.

@keyframes drop {
    0% {
        opacity: 0;
        transform: translateY(-80px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0px);
    }
}

Это поможет?