Как сделать обратную анимацию?

Question

[Demigodd]

Есть вот такой простой код.

https://jsfiddle.net/BloodStorm/37zLej3p/

Позиция Box начинается с 0 , и прибавляется до 350, если pos=350 то по идее в else должно пойти - else до 0, как то так.
Код простенький поймете, как создать обратную анимацию?что не так сделал?

P.S И еще надо что бы text был в самом центре div, через text-align: center; он идет в центр самый вверх. правильно ли я сделал? через margin-top немного снизил или есть другой вариант?

Comments

[Kovalsky]

Просто посмотрите какие именно стили у вас получаются на выходе, выводите в консоль pos + pix.

Answer 1

[Андрей Буров]

https://jsfiddle.net/37zLej3p/1/

Answer 2

[Stalker_RED]

Бадум-тсс!

#box {
  /* text pos and color */
  line-height: 100px;
	color: white;
	text-align:center;
  
  background-color: red;
  position: absolute;
  width: 100px;
  height: 100px;

  /* ANIMATION SPEED AND START POS */
  transition: left 1.5s linear;
  left: 0px;
}

https://jsfiddle.net/ypL2bjek/

Comments

[Demigodd]

В принципе вариант но не то. А как тут обратную анимацию сделать?

[Stalker_RED]

#box {
  // ...
  animation: tuda-suda 4s linear infinite;
}

@keyframes tuda-suda {
  0% {left: 0px;}
  50% {left: 350px;}
  100% {left: 0px;}
}

https://jsfiddle.net/ypL2bjek/2/