filter: drop-shadow 无法流畅过度

一个平静的上班族
  • 4
新手上路,请多包涵

filter: drop-shadow 无法流畅过度
感觉是一个一个画面跳的来的

.className{
    -webkit-animation: logo 10000ms  infinite;
    animation: logo 10000ms  infinite;
    transition: all 1s;
}
 @keyframes logo {
            0% {
                filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
            }
            50% {
                filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
            }
            100% {
                filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
            }
        }
回复
阅读 905
2 个回答

针对感觉是一个个画面跳的来的,我建议把关键帧设计成这样首尾相同,阴影就不会有突然消失的感觉。

@keyframes logo {
            0%,100% {
                filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
            }
            30% {
                filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
            }
            60% {
                filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
            }
        }

还有就是缩短动画时间

animation: logo 1000ms  infinite;

我是觉得10秒时间太长了,而且变化很小只有1px的变化,1px的变化分摊在5秒中,怎么看应该都不会流畅的。

宣传栏