filter: drop-shadow 无法流畅过度

Question

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

Answer 1

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

@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秒中，怎么看应该都不会流畅的。

Answer 2

无解，不过你可以参考下这种用opacity和transform模拟出来的过渡box-shadow的方法
https://tobiasahlin.com/blog/...