我try 执行下面的动画，它基本上包括提高锁，使它旋转，然后下降.我希望这件事按比例做.然而，即使使用低得多的下降百分比，动画似乎在2s中执行前两个步骤，并在剩余的2s中执行下降.
@keyframes float {
0%,3% {
transform: translatey(0px);
}
3%, 6% {
transform: translatey(-4px);
}
6%, 30%{
transform: rotateY(0deg) translatey(-4px);
}
30%, 94%{
transform: rotateY(1080deg) translatey(-4px);
}
94%, 100%{
transform: translatey(0px);
}
}
.square {
animation: float linear infinite;
animation-duration: 4s;
}
div {
perspective: 500px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 44px;
}
.cadeado{
background-image: url(https://www.qas.flyembraer.com/irj/go/km/docs/download_center/Anonymous/loading-sem-cadeado.jpg);
width: 144px;
height: 144px;
align:center;
}<div class="cadeado">
<div class ="square"><img src="https://www.qas.flyembraer.com/irj/go/km/docs/download_center/Anonymous/cadeado.jpg" alt="" align="center"></div>
</div>
I've tried setting the proportional % to 33% for each step but it still doesn't work