我有一个基本按钮,最初我对它进行了动画处理。但是一旦动画完成后,我想在悬停时添加新的动画效果;但由于某种原因似乎无法实现。
例如:
按钮动画:
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
max-height: 100%;
overflow: hidden;
}
.slide-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background-color: #feffff;
box-shadow: 0 2px 20px 0 #686f7638;
margin-top: 10px;
width: 45px;
height: 45px;
animation: testing 1s ease-in forwards;
}
.slide-btn:hover {
transform: scale(1.5);
}
@keyframes testing {
to {
transform: translateX(100px);
}
}
<div class="container">
<div class="slide-btn">></div>
</div>
我猜测对于我正在使用的 CSS 动画,我需要 forwards
,但实际上我真的需要 forwards
。