I’m trying to execute the animation below, which basically consists of raising the lock, making it rotate and then going down. I would like this to be done proportionately. However, even using a much lower percentage for the descent, the animation seems to execute the first two steps in 2s and the descent in the remaining 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
2
Answers
I have found that mirroring he animation to be helpful. Is this closer to what you were looking for?
These timings somewhat matches your query. For the first 0.5s the lock moves -30px upwards, then rotates for 3s and then moves back to original position in 0.5s. So a total 4s animation.