Well I'm using this @keyframe
, but after descending to the right I would like the image to be inverted, this code does the inversion as I want:
img {
// -moz-transform: scaleX(-1);
// -o-transform: scaleX(-1);
// -webkit-transform: scaleX(-1);
// transform: scaleX(-1);
// filter: FlipH;
// -ms-filter: "FlipH";
// }
And this is my @keyframe
:
@keyframes move {
0% { top: 750px; left: 0px; transform: translate(0, 0); } //posição inicial
10% { top: 750px; left: 100%; transform: translate(-135%, 0) } //vai para a direita
15% { top: 1100px; left: 100%; transform: translate(-135%, -50%) } //desce do lado direito
25% { top: 1100px; left: 0px; transform: translate(35%, -50%) } //vai para a esquerda
30% { top: 1500px; left: 0px; transform: translate(35%, -120%) } //desce do lado esquerdo
40% { top: 1500px; left: 100%; transform: translate(-120%, -120%) } //vai para a direita
45% { top: 1500px; left: 100%; transform: translate(-120%, -50%) } //desce do lado direito
55% { top: 1500px; left: 0px; transform: translate(35%, -50%) } //vai para a esquerda
60% { top: 1910px; left: 0px; transform: translate(35%, -120%) } //desce do lado esquerdo
70% { top: 1910px; left: 100%; transform: translate(-120%, -120%) } //vai para a direita
75% { top: 1915px; left: 100%; transform: translate(-120%, -50%) } //desce do lado direito
85% { top: 1915px; left: 0px; transform: translate(35%, -50%) } //vai para a esquerda
90% { top: 2320px; left: 0px; transform: translate(35%, -120%) } //desce do lado esquerdo
100% { top: 2320px; left: 100%; transform: translate(-120%, -120%) } //vai para a direita
}
I wanted to use that code (or one that does the same) to invert the image after the code that says "descends from the right side" after the 15%.