Анимация CSS div в фиксированное положение

Question

Этот код принимает мяч и перемещает его вправо и назад. Как я могу заставить его двигаться вправо и оставаться там?

http://codepen.io/chriscoyier/pen/pBCax

Вы можете поиграться с живой версии на выходе там.

body { 
padding: 30px; 
} 

#animate { 
position: absolute; 
top: 100px; 
left: 30px; 
width: 100px; 
height: 100px; 
border-radius: 50%; 
background: red; 

animation: move 3s ease infinite; 
} 

@keyframes move { 
    50% { 
top: 200px; 
left: 130px; 
} 
} 

код CSS-код говорит «бесконечный», и когда я удаляю, что он движется мяч направо, а затем вернуться туда, где он был один раз. Я бы хотел, чтобы он переместился вправо и остался там.

Answer 1

Заменить infinite с forwards и добавить from и to к вашему @keyframes

Регулировка top, left значения по мере необходимости.

Смотрите ниже:

body { 
 
    padding: 30px; 
 
} 
 
#animate { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 30px; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    background: red; 
 
    animation: move 3s ease forwards; 
 
} 
 
@keyframes move { 
 
    from { 
 
    top: 0px; 
 
    left: 10px; 
 
    } 
 
    to { 
 
    top: 200px; 
 
    left: 130px; 
 
    } 
 
}

<h1>Animate with Top/Left</h1> 
 

 
<div id="animate"></div>

Answer 2

Здесь вы идете:

animation: move 3s ease forwards; 

http://codepen.io/anon/pen/yebvZx

Вы можете прочитать о animation-fill-mode собственности здесь:
https://drafts.csswg.org/css-animations-1/#animation-fill-mode

вперед - После завершения анимации (как определено по его анимати on-iteration-count), анимация будет применять значения свойств за время окончания анимации.

Answer 3

Ваш ищете:

animation-fill-mode: forwards;