How to flip an image horizontally halfway through an animation - html

Question

I'm wondering if it's possible to perform a CSS transition where an image does this:
Begins on the left.
Moves from the left, to the right.
When it reaches the right hand side, it flips horizontally, and then
moves back towards the left again.
When it reaches the left, it flips horizontally again and moves
towards the right side, and so on.
So far I have this fiddle: https://jsfiddle.net/kkn7cpqL/1/
This:
animation-direction: alternate;
is moving the image back and forth correctly, but I don't know how to make it flip once it reaches the sides. I'd like the arrow to always be pointing in the direction it's moving.
Any help with this would be really appreciated, thanks!

Answer 1

Try this code
This might help you to achieve what you want.
#keyframes arrow {
0% {
left: 0%;
transform: rotateY(0deg);
}
49% {
transform: rotateY(0deg);
}
50% {
left: 90%;
transform: rotateY(180deg);
}
99% {
transform: rotateY(180deg);
}
100% {
left: 0%;
transform: rotateY(0deg);
}
}
div.arrow {
width: 44px;
height: 50px;
position: absolute;
animation-name: arrow;
animation-duration: 10s;
/* double of original time */
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
<div class="arrow">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvXxGWc9lfv_WXJ3RtUb-4pBMRDYZOG4b9YXNnNkNGOsImdDnN5w" />
</div>

Answer 2

Just make it flip on 0% and 100% in animation it will give you the required result. Or you can just simply copy the below code.
#keyframes arrow {
0% {left:50px; top:10px;-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";}
100% {left:250px; top:10px;-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
filter: FlipH;
-ms-filter: "FlipH";}
}
div.arrow {
width: 44px;
height: 50px;
position: absolute;
animation-name: arrow;
background-repeat: no-repeat;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
<div class="arrow">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvXxGWc9lfv_WXJ3RtUb-4pBMRDYZOG4b9YXNnNkNGOsImdDnN5w"/>
</div>

Answer 3

Try this code
This might help you to achieve what you want
#keyframes arrow {
0% {left:50px; top:10px;}
50%{transform: rotateX(90deg);}
100% {left:250px; top:10px;}
}
div.arrow {
width: 44px;
height: 50px;
position: absolute;
animation-name: arrow;
background-repeat: no-repeat;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
http://codepen.io/ankitkothari225/pen/bpgRPo