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

有帮助吗？

动画翻译无法正常工作

1 个答案: