В чем проблема с анимацией?

Question

[IninsaY]

Анимация описывается на 42 строчке css файла.
https://codepen.io/IninsayY/pen/zYxgdOq
Я не понимаю, почему игнорируются 2 шага? Анимации идут только прямой линией или это я затупок и не правильно написал код? (текст должен двигаться по квадрату)

Answer 1

[Антон]

@keyframes text-move {
	0% {
		left: 0;
		top: 0;
	}
	33.3% {
		left: 0;
		bottom: 0;
    top:unset;
	}
	66.3% {
    left:unset;
		right: 0;
		bottom: 0;
	}
	100% {
		right: 0;
		top: 0;
	}
}

Comments

[IninsaY]

Спасибо за ответ

Answer 2

[twobomb]

Если нужен плавный переход, то нужно что то типа

@keyframes text-move {
	0% {
		left: 0;
		top: 0;
	}
	33.3% {
		left: 0;
		top: 100px;
	}
	66.3% {
		left: 100px;
		top: 100px;
	}
	100% {
		left: 100px;
		top: 0;
	}
}

Comments

[IninsaY]

Спасибо за ответ, но мне больше подходит вариант више

Answer 3

[art style]

@keyframes text-move {
	0% {
		left: 0;
		top: 0;
	}
  33% {
left:unset;
    bottom:unset;
    right:0;
    top:0;
  }
  66% {
    left:unset;
    bottom:0;
    right:0;
    top:unset;
  }
	100% {
left:0;
    bottom:0;
    right:unset;
    top:unset;
	}
}

так?

Comments

[IninsaY]

Спасибо за ответ