How keep the image rotated during the reverse move

问题:

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

I was trying to give animation to the first image in the following way:

• in 0% it starts at the beginning of the div (the fish's head is on the right)
• in 100% it ends in the end, but at this point I want to rotate the image and keep that effect until it gets 0% again. (that is, the fish should point towards the left during the reverse motion)

But it just rotates in 100% and no more. I don't know if this happens because I don't understand some 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've tried everything in the @keyframes and looked into W3Schools website about animation property, but it didn't help me. Any suggestions?

回答1:

Reason:

The behavior that is seen is expected one based on your @keyframes and the animation-direction setting. When the animation's direction is set to alternate, the UA executes the animation from 0 to 100 for the odd numbered iterations, 100 to 0 for the even numbered iterations.

As per your keyframes, the transform goes from rotateY(180deg) to rotateY(0deg) at 1% of the animation's duration itself and so during the odd numbered iterations you don't see any visible rotation (as duration is pretty small) and it goes from rotateY(180deg) (at 100%) to rotateY(0deg) (at 99%) because of which you don't get to see any visible rotation during even numbered iterations also.

The problem in writing keyframes for forward direction and re-using the same for the reverse (using animation-direction) is that it can be done only when the states are the same for both. In this case, it is not because the element should be in unrotated state during forward movement and should have rotateY(180deg) during the reverse movement.

Solution:

For the element to be seen in its rotated state, the transform must be retained for some time. So, for your case it is better to do away with the animation-direction: alternate setting and write both the forward and reverse motions within the keyframes itself like in the below snippet.

(Note: Since we are writing both forward and reverse motions within the keyframes, you may have to double the animation-duration).

@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>

回答2:

The problem was that you had animation-direction: alternate; in your CSS. To compensate for removing this, you also need to make the img moving to left: 90% being at the 50% mark in the animation, not 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>