Make CSS animation stop at the end in position

[toolman]

Hi there,

I have the following CSS animation which moves a letter the the left:

.a-letter{
	
	-webkit-animation: mymove 1s 1; /* Chrome, Safari, Opera */ 
  animation: mymove 2s 2;
  position: relative;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {margin-right: 0;}
    100% {margin-right: -200px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {margin-right: 0;}
    100% {margin-right: -200px;}
}

It works, but after it has got to 100%, the letter bounces back to it’s start position. Is there a way to have the letter remain to the left and stay there. I am referring to the end point when it has finished moving the -200px.

Thanks!

[coothead]

Hi there toolman,

use…

   animation-fill-mode: forwards;

…or as shorthand…

animation: mymove 2s 2s fowards;

coothead

[PaulOB]

These days you can probably lose the WebKit prefixes for keyframes and animation as all modern browsers support the proper properties.

Also rather than using margin use transform with a translate value as animation is more performant using transforms. Unless of course where margin is critical to the effect in altering the flow of the document.

[toolman]

Thank you. I had to use:
animation-fill-mode: forwards;

as the other method seemed to stop the animation

[PaulOB]

@toolman

I had to use:
animation-fill-mode: forwards;

That’s unlikely to be true unless you found an obscure bug. :).

It’s more likely you had a typo that you didn’t notice.

[coothead]

@PaulOB

It’s more likely you had a typo that you didn’t notice.

I did correct @toolman’s original code…

    animation: mymove 2s 2;

…to this…

    animation: mymove 2s 2s fowards;

Perhaps what they actually required was just this…

    animation: mymove 2s  fowards;

coothead