Hello. There is a code that moves the circle to a given point and back:

@-webkit-keyframes myfirst { from {background: red; top: 50px; left: 50px;} to {background: yellow; top: 300px; left: 300px;} } @-moz-keyframes myfirst { from {background: red; top: 50px; left: 50px;} to {background: yellow; top: 300px; left: 300px;} } #ball { border-radius: 100%; position: absolute; width: 50px; height: 50px; animation: myfirst 1s linear 0s 2 alternate; -moz-animation: myfirst 1s linear 0s 2 alternate; /* Firefox */ -webkit-animation: myfirst 1s linear 0s 2 alternate; /* Safari и Chrome */ }

The problem is that after the animation stops the circle disappears .. Tell me where is the error?

    1 answer 1

    The circle does not disappear, just the styles exposed during the animation are replaced with initial values. To make the circle visible after the animation, add to the circle styles:

     background: red; top: 50px; left: 50px;

    Example

    • Thank. Can I have another question?)) Trying to make the circle move to the desired point and stay there. I do this: -webkit-animation: myfirst 2s linear 0s 1; -moz-animation: myfirst 2s linear 0s 1; But the circle moves to the given coordinates and then turns back to the previous ones. What needs to be fixed? - LightShock
    • one
      It is necessary to specify the css-properties for #ball that are responsible for the view at the end of the animation. that is, instead of "background: red; top: 50px; left: 50px;" need to write "background: yellow; top: 300px; left: 300px;". jsfiddle.net/vEv4R/1 - caravaneer
    • Thanks again) - LightShock