css动画卡片位置会闪的问题

vieber

于 2022-10-24 17:21:08 发布

阅读量579

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： 1024程序员节

40 篇文章

订阅专栏

博客讨论了如何通过调整CSS动画的延迟播放解决卡片居中显示时从右下角弹出的问题，提供了一种优化用户体验的方法。通过设置适当的`animation-delay`，确保卡片在完全准备好的状态下开始动画，从而实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用css做了一个动画，当用户点击按钮的时候动画就会出现，但是因为动画卡片是居中显示的，

position: absolute;
z-index: 15;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) scale(0);

然后动画开始的时候会显示出来，这个时候卡片会从右下角蹦出来，体验很不好，研究发现只需要将动画延迟播放，让卡片准备好，再进行动画就可以了。

animation-name: upgrade-card-old;
animation-delay: 0.1s;