Animacja CSS zmiana parametrów transform-origin:x,y w trakcie animacji.

Question

Dzień Dobry.
Prowadzę stronę nauki jazdy
Potrzebuje zrobić animację: Obiekt musi poruszać się po "ósemce" (zadania motocyklem)

próba zmiany transform-origin:-400% 50%;..... na 51% animacji  działa ale przesuwa obiekt do puntu startowego. Próba przsunięcia z użyciem translateX powoduje cyrk.

0% {transform:rotate(0deg) translateX(0px); transform-origin:400% 50%; }
	
	50% {transform:rotate(-180deg) translateX(0px); transform-origin:400% 50%; }
	100% {transform:rotate(180deg) translateX(0px); transform-origin:400% 50%; }
	

 

Answer 1

Tu powinieneś znaleść rozwiązanie.

How to create an infinite Sign Trajectory using CSS animation?