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));
            }
        }
回复
阅读 980
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秒中,怎么看应该都不会流畅的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏