animation css - jak odwrócić element?

pytanie zadane 23 września 2017 w HTML i CSS przez mola85 Początkujący (320 p.)
zmienione kategorie 23 września 2017 przez criss

Witam, chciałabym uzyskać taki efekt - kiedy pomarańczowy element dochodzi do końca lini - 100 procent głowa odwraca się o 180 stopni. Jednym słowem głowa poruszając się w prawo jest odwrócona w tą samą stronę. Chciałabym uzyskać ten sam efekt kiedy głowa "wraca" z powrotem - póki co głowa porusza się do tyłu jednak jest ona cały czas skierowana w prawą stronę. Dodam że usta zamykają się i otwierają - tak jakby głowa zjadała linię i nie chciałabym aby ten element animacji przestał działać. Zdjęcie i kod poniżej. Dziękuje za odpowiedż.

<div class="wrap">
  <h1>LOADER</h1>
      <div class="loader"></div> 
</div>

.loader{
	width:500px;
	margin-left:10px;
	border-top:8px dotted lightgray;

}
.loader:before,.loader:after{
	content:'';
	width:0px;
	height:0px;
	display:block;
	border:30px solid orangered;
	border-radius:50%;
	border-right-color:transparent;
	border-bottom-color:transparent;
	position:absolute;
	top:50%;
	margin-top:35px;
	margin-left:-3px;
	animation:topchomp 1s ease-out infinite reverse,movechomp 3s linear infinite alternate;
	
}
.loader:after{
	
	border-color:orangered;
	border-top-color:transparent;
	border-right-color:transparent;
	animation:bottomchomp 1s ease-out infinite,movechomp 3s linear infinite alternate;
}
@keyframes bottomchomp{
	0%,100%{
	transform:rotate(0deg);
	}
	50%{
	transform:rotate(-45deg);
	}
}
@keyframes topchomp{
	0%,100%{
	transform:rotate(0deg);
	}
	50%{
	transform:rotate(45deg);
	}
}
@keyframes movechomp{
	0%{
	left:20px;
	}
	
	100%{
	left:500px;
	}
}