我中心我的按钮与位置绝对,并希望测试出一个动画,我期望它从左边滑入,但它不是幻灯片下的原始位置从侧面,然后跳回到原来的中心位置。
我觉得这是一个简单的修复,但因为我是新的,我真的不知道如何解决它。我的猜测是一些与绝对定位,但我尝试了不同的东西没有成功。
感谢您的帮助!
.btn-box {
position: relative;
}
.btn {
text-decoration: none;
font-weight: 600;
letter-spacing: 0.5rem;
background-color: rgba(19, 206, 212, 0.801);
color: rgba(98, 40, 173, 0.801);
padding: 1.5rem 2.4rem;
border-radius: 10rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: moveInRight 0.3s;
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-10rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
1条答案
按热度按时间nvbavucw1#
问题是您设置了一个
transform
值,然后用动画覆盖它应该更新
keyframes
以匹配transform
值(or将其从类中删除并使用
animation-fill-mode
)试试这个