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

Posted 2022-11-23 vieber

使用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;