Geek Answers Handbook

How to save the image during the reverse movement?

I'm having problems with the effect I want to create. My body in the HTML file is just a div with two images.

I tried to give animation to the first image as follows:

  • at 0% starts from the beginning of the div (fish head on the right)
  • in 100% it ends at the end, but at this moment I want to rotate the image and save this effect until it becomes 0% again. (i.e. the fish should point to the left during the reverse movement).

But it just rotates 100% and no more. I don’t know if this happened because I don’t understand any concept of the animation property.

This is all my code:

@keyframes fish01 { 0% { left: 0%; transform: rotateY(180deg); } 1% { transform: rotateY(0deg); } 99% { transform: rotateY(0deg); } 100% { left: 90%; transform: rotateY(180deg); } } body { background-color: black; } div { position: absolute; margin-left: 18%; margin-top: 3%; width: 800px; height: 500px; border: 5px double #DDDDDD; border-radius: 1em 1em; background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg"); } div img:nth-child(1) { float: left; position: absolute; margin: 0px; top: 20%; width: 100px; height: 50px; transform: scale(1.5, 1.5); animation-name: fish01; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in; } div img:nth-child(2) { float: left; position: absolute; top: 20%; left: 60%; } 
 <section> <div> <img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png" /> <img src="http://www.pets4homes.co.uk/images/fish_hero.png" /> </div> </section>

I tried everything at @keyframes and looked at the @keyframes website about animated property, but that didn't help me. Any suggestions?

+6
source share
2 answers

Cause:

The behavior that will be visible is expected to depend on the @keyframes and animation-direction settings. When the animation direction is specified as an alternative, UA performs animation from 0 to 100 for iterations with an odd number, from 100 to 0 for even iterations.

According to your keyframes, transform goes from rotateY(180deg) to rotateY(0deg) by 1% of the duration of the animation itself, so during odd iterations you don't see visible rotation (since the duration is quite rotateY(180deg) ), and it comes from rotateY(180deg) (from 100%) to rotateY(0deg) (99%), because of which you also do not see visible rotation during even numbered iterations.

The problem with writing keyframes for the forward direction and reusing for the reverse (using animation-direction ) is that this can only be done when the states are the same for both. In this case, this does not happen because the element must be in a non-rotating state while moving forward and must have rotateY(180deg) during the reverse movement.

Decision:

In order for an element to be seen in its rotated state, transform must be preserved for some time. So, for your case, it is better to end the animation-direction: alternate setting and write both forward and reverse movements in the key frames themselves, as in the fragment below.

( Note: Since we record both reverse and reverse movements in key frames, you may need to double the animation-duration value.)

 @keyframes fish01 { 0% { left: 0%; transform: rotateY(0deg); } 49.5% { left: 90%; transform: rotateY(0deg); } 50.5% { left: 90%; transform: rotateY(180deg); } 100% { left: 0%; transform: rotateY(180deg); } } body { background-color: black; } div { position: absolute; margin-left: 18%; margin-top: 3%; width: 800px; height: 500px; border: 5px double #DDDDDD; border-radius: 1em 1em; background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg"); } div img:nth-child(1) { float: left; position: absolute; margin: 0px; top: 20%; width: 100px; height: 50px; transform: scale(1.5, 1.5); animation-name: fish01; animation-duration: 10s; /* double of original time */ animation-fill-mode: forwards; animation-iteration-count: infinite; animation-timing-function: ease-in; } div img:nth-child(2) { float: left; position: absolute; top: 20%; left: 60%; } 
 <section> <div> <img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png" /> <img src="http://www.pets4homes.co.uk/images/fish_hero.png" /> </div> </section>
+1
source

The problem was that you had animation-direction: alternate; in your CSS. To compensate for this deletion, you also need to make img move to left: 90% to the 50% mark in the animation, and not to the 100% mark.

Hope this helps! :)

 @keyframes fish01{ 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); } } body { background-color: black; } div { position: absolute; margin-left: 18%; margin-top: 3%; width: 800px; height: 500px; border: 5px double #DDDDDD; border-radius: 1em 1em; background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg"); } div img:nth-child(1) { float: left; position: absolute; margin: 0px; top: 20%; width: 100px; height: 50px; transform: scale(1.5, 1.5); animation-name: fish01; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in; } div img:nth-child(2) { float: left; position: absolute; top: 20%; left: 60%; } 
 <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"/> <title>CSS rotate animation</title> <link rel="stylesheet" href="Transicion02.css"/> </head> <body> <section> <div> <img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png"/> <img src="http://www.pets4homes.co.uk/images/fish_hero.png"/> </div> </section> </body> </html>
+1
source

More articles:


All Articles