CSS Animation: how to flip an image?-CodePudding

I'm trying to do a simple animation in CSS where an image moves horizontally. At the end of horizontal movement (meaning, the left-most and right-most points), I want the image to flip on the vertical axis. I do NOT want the image to be flipping during the horizontal movement; I only want the flip to occur at the left-most and right-most points.

Here's what I have so far:

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div class="duck"></div>

  </body>

</html>

.duck {
  width: 100px;
  height: 100px;
  position: relative;
  animation: duck 8s infinite;
}

@keyframes duck {
  0% {
    top: 20px;
    left: 250px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
  }

  50% {
    top: 20px;
    left: 20px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
  }

  100% {
    top: 20px;
    left: 250px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
  }
}

https://jsfiddle.net/vnu4hyxg/

How do I do the flip?

CodePudding user response：

Try this. I added an extra frame, 51%, and set transform at 50, 51, and 100.

.duck {
  width: 100px;
  height: 100px;
  position: relative;
  animation: duck 8s infinite;
}

@keyframes duck {
  0% {
    top: 20px;
    left: 250px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
  }

  50% {
    top: 20px;
    left: 20px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
    transform: scaleX(1);
  }
  51%{ transform: scaleX(-1);}

  100% {
    top: 20px;
    left: 250px;
    background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
    background-size: contain;
    transform: scaleX(-1)
  }
}

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div class="duck"></div>

  </body>

</html>

CodePudding user response：

try this

<style>
img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
</style>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAABUCAMAAACP31ggAAAAeFBMVEX///8AUZf2 vsAPY Cn8MATJUAT5aoudLi6fEASpSgtc7CzN7R3OjL1ONIcaj5 /0AQJBeg7E1Z6IFV5uInsMARZLu8/cAN4wnYJ wv9a x9sAK4iQpsZ3k7sjY6CbsMtSeqwAMIoAIIVsi7ZxlrxAdqoAJYa3yd0JiWMVAAADTElEQVRoge2Y63KrIBSFUWLERIOJ9ZZqNE1b3/8ND7hRuRk7p2emZ6Z8fyIL9l5qNiIi5HA4HA6Hw FwfJvYBKHCosaErkZJPYga2Wz4VRSoRDlCVxyYeNlHKKIKT4lKaynjoMZif81XI0i5r65ynyjCZT35KpykjH2uhK34ojo0QIgcTBXoyHi2uizdaD2U2n1/Ct/ErsrdZv96vhXbrMQad/b/vuqiBKu7Ite0NyLykU t53WtroK9Bq/n1NPVGQ8nqMg0LdqJfE2uDU/tvrTZGbDpaYoSA/JtQeBrdKzc6J FAlaR6m2qtxfRIj2jCTLOvlHUfBSzdIq/QNvrRbv1Mgl P lNErx22zfyOHN1AHgUvXL23cOoKV8LUUB ZEqCJSXa9q3PQKioPYj95NuKUUfR7s4yjaF0m76/jfBy4lzUOwOiznku00Yd8EAPdWRj Og8rSuFfUTm/jaAqPd8/E0JBOTvoAfbddXdLpyber3VxeS22KIdRFXDCfo 4KcfRLaXTd/fRg1TtbfOX5Vi6ReztR/mmc15oKRfZvRzxOql15V1GVyM2wjWzRB1y qXN2gQ2b5QV1BClVpXmaWuLtUyj3YiqkZkKcGKoKPQt uK s/WIxVf7/eVoeNb0lfXo5/i AJcFbUFsZ3OuxGjEtGul7YvDl9adr2xOK7RFit1BS9Z93kdDNR6WeoKoRP0BfwN/ut11eCcg1Xf yjmn9M/WqUg3ET7AVHlgV97Ccf8HAY4xo9NXyredalV1du 2ob6oUsCSm3Z/hPCgw6bxKQzVKk/RlRrIxECuyclurNftbkPhf2gZR86USbqPhQfxkRs7xcF48NM2YmK/aDu7mc41SiZ710XF3DE9imRKLG5rsYqw fxSNTYSHrnvqSpO21WERN2NhZ1ptCj4InNY DaCi0bort4GJLhO XwV4RFSI6JujwlRwN2xldTBa5j5VBFE68g5BpPB3IAEzoaDg1SfP0qjzQw 39L4zsDJ8evsGIVeykK6opdwZt4sR7krxQlu/ekHmhXdKqvkR1bv2 wcvVujXhkFHt5vPBFGVrxRfVQxOqzECUmLK9FTeJlxadKx7znFr9qtLj1CXI4HA6Hw FwOP4BfwB7YGP7W9EsdQAAAABJRU5ErkJggg==" alt="Paris">