How to use animation with transform CSS - html

Question

I have an image and want to move it to the right and then to left animation using CSS. However, I wanted to combine the drive with transform: scaleX (-1); as below:
----image---> move to right
move to left with transform: scaleX (-1)
<------image----
I have the code:
<div class="logo">
<img src="resources/images/logo.png" alt=""/>
</div>
.logo{
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite ;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;}
#-webkit-keyframes example {
from {
margin-left: -200px;
transform: scaleX(1);
}
to {
margin-left: 200px;
transform: scaleX(-1);
}}
#keyframes example {
from {
margin-left: -200px;
transform: scaleX(1);
}
to {
margin-left: 200px;
transform: scaleX(-1);
}}

Answer 1

You can not get this effect with an alternated animation, because the back movement is different from the forward movement.
First, we need to set a single animation for both directions; then , you can add keyframes to control the reversal
div {
width: 200px;
height: 200px;
background-color: coral;
animation: custom 4s infinite;
}
#keyframes custom {
0% {
margin-left: -200px;
transform: scaleX(1);
}
49% {
margin-left: 200px;
transform: scaleX(1);
}
50% {
margin-left: 200px;
transform: scaleX(-1);
}
100% {
margin-left: -200px;
transform: scaleX(-1);
}
}
<div>TEST</div>