IninsaY
@IninsaY

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

Анимация описывается на 42 строчке css файла.
https://codepen.io/IninsayY/pen/zYxgdOq
Я не понимаю, почему игнорируются 2 шага? Анимации идут только прямой линией или это я затупок и не правильно написал код? (текст должен двигаться по квадрату)
  • Вопрос задан
  • 62 просмотра
Решения вопроса 3
Eridani
@Eridani
Мимо проходил
@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;
	}
}
Ответ написан
twobomb
@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;
	}
}
Ответ написан
@arttstyle
web-макака
@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;
	}
}

так?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
04 апр. 2020, в 23:07
30000 руб./за проект
04 апр. 2020, в 23:05
100000 руб./за проект
04 апр. 2020, в 22:57
2000 руб./за проект