Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How keep the image rotated during the reverse movement?

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?

like image 748
Cristinadeveloper Avatar asked Feb 16 '16 01:02

Cristinadeveloper


People also ask

How do I rotate an image in web development?

Approach: You can use rotate() function defined as a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. It takes one parameter which defines the rotation angle. The rotation angle consists of two parts, the value of the rotation followed by the unit of rotation.

How do you rotate an image in CSS?

Rotating an image using CSS Once the CSS code is applied to your . css file, stylesheet, or <style> tags, you can use the CSS class name in any of your image tags. To rotate an image by another measure of degrees, change the "180" in the CSS code and <img> tag to the degree you desire.


1 Answers

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>
like image 162
Harry Avatar answered Sep 30 '22 05:09

Harry