How to flip an image horizontally halfway through an animation


Tags: html,css

Problem :

I'm wondering if it's possible to perform a CSS transition where an image does this:

  • Begins on the left.
  • Moves from the left, to the right.
  • When it reaches the right hand side, it flips horizontally, and then moves back towards the left again.
  • When it reaches the left, it flips horizontally again and moves towards the right side, and so on.

So far I have this fiddle: https://jsfiddle.net/kkn7cpqL/1/

This:

animation-direction: alternate;

is moving the image back and forth correctly, but I don't know how to make it flip once it reaches the sides. I'd like the arrow to always be pointing in the direction it's moving.

Any help with this would be really appreciated, thanks!



Solution :

Try this code

This might help you to achieve what you want.

@keyframes arrow {
  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);
  }
}
div.arrow {
  width: 44px;
  height: 50px;
  position: absolute;
  animation-name: arrow;
  animation-duration: 10s;
  /* double of original time */
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
<div class="arrow">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvXxGWc9lfv_WXJ3RtUb-4pBMRDYZOG4b9YXNnNkNGOsImdDnN5w" />
</div>


    CSS Howto..

    How to give priority to a div in terms of overlapping divs on a drop down menu?

    How to make ScrollPanel only visible when its inside widget is higher than it & not visible when its inside widget is shorter than it?

    How can I automatically highlight a specific character in link text using JQuery + CSS?

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    How to center text over an image while keeping it below fixed nav bar in css?

    How to fix error from posting html element and prevent it from running

    CSS : How to have an input field auto adjusting its width

    how to scale image according to image - css

    How to merge .CSS files with Sass (or other tool)? [duplicate]

    how to disable the highlighting view on selection either in html or css?

    How to select a certain element in CSS by numerical position

    How to create a tag using css

    How can set text row limit using angularJs ng-repeat?

    How to add hover class to jQuery click(function() accordian divs?

    How can I get this anchor link to look like a button

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    JavaScript: How to clear my custom keyboard mappings and use the default ones

    How to set fixed auto width in tab-content bootstrap?

    How to make CKEditor render text with a CSS?

    How to create text block over the images with css and make it responsive

    how to tell org-mode to embed my css file on HTML export?

    Image won't show up html + css

    How to add a rollover effect to the text on a map

    How to make width of nested CSS elements all the same?

    Parallax image shows at top of page on load

    django render_to_response how to send special characters

    How to see the source code of a particular html tag by onClick() javascript without showing its css?

    CSS Syntax - How to interpret this?

    How to read a browser's unsupported CSS properties?

    How to use pure CSS to control other elements under same parent?