css - 动画翻译无法正常工作

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);
    }
}

这有帮助吗？