I have the following code:
<html>
<head>
<style>
#pruebamov {
width: 120px;
background-color: coral;
color: white;
animation: pruebamov 3s 3;
}
@keyframes pruebamov {
50% {width: 100%;}
}
</style>
</head>
<body>
<div id="pruebamov">
<h1>Hola</h1>
</div>
</body>
</html>
I want to get that, the 3rd time the movement is performed, it stays there.
I mean, when you do the movement from the beginning to the end, when you do it the 3rd and last time, it stays at the end of the movement instead of going back to the beginning.
I've tried tinkering with a few things, but it has had the opposite effect. I don't know how I could get this.
I can't think of a way to do it with CSS alone , since what you need is to execute something when the animation ends (which is often called a callback ). But using Javascript (Jquery in my example) we can detect when the animation has finished and then modify the width of the element so that it stays at 100% .
The other drawback is that what you want to do is stop your animation at the end of the first of the two steps (First step: get bigger, Second step: get smaller). To do this you can tell the animation to run two and a half times (2.5).
edited
Edited to add a solution without the use of Javascript
One way to do it only with CSS and changing the code as little as possible would be to play with the parameters of the animation. Mainly:
animation-fill-mode
will indicate what you want to happen when the animation ends. By default it returns to the position specified in CSS, but the values can be changed so that it ends with the last frame of the animation (forwards
) or the first (backwards
).animation-direction
allows you to indicate in which direction you want the animation to run, by default it is forward (normal
) but you can make it run backwards (reverse
) or in both directions (alternate
oralternate-reverse
).animation-timing-function
: Allows you to indicate the time function that adjusts the speed at different moments of the animation. By default it starts "slow", speeds up in the middle and slows at the end (ease
), but you can make it start slow and only speed up (ease-in
), or go all at the same speed (linear
) or go fast at the beginning and slow at the end (ease-out
)... there are quite a few options.So by changing the animation a bit you can:
Make the end point 100% of the width instead of 50%:
Indicate that you want the addresses to alternate:
Since you want it to grow to 100%, shrink to the original size, grow again, shrink again, and finally back to 100%, that's 5 iterations. And since before the animation included both directions and lasted 3 seconds but now it is in each direction, you must adjust the animation time and its number of executions accordingly:
You want the animation to stay in the final state:
To end, . To change this you have to play around with the easing values:
With these changes the code looks like this:
Although the animation looks similar, it is not exactly the same because the times and speeds do not match. You should play around with the values of
animation-timing-function
to make it a perfect fit.Investigating more through the page I found what I was looking for (It was hidden in a different place).
This is how it turned out, although I don't rule out @phpMyGuel's answer, since the " smooth effect " it had when making the return was lost in this code.
Changes :
Basically, what I did was add the line
animation-fill-mode: forwards;
in the css part of thediv
so that it stays in the same position where it ends.This is indicated by the following line to add:
Which has to indicate where the movement begins, and where it ends.