CODEWITHSUNDEEP
cssanimationkeyframe
NiKoLaPrO
NiKoLaPrO

Reputation: 624

CSS animation - make object rotate horizontaly at 100%

I created a CSS animation (flying cat), however when i set position at %99 and rotation (transform: scaleX(-1)) at 100%, cat starts rotating at 0% and finishes at 100%, I want to rotate cat between 99% and 100%.

@keyframes move-ass {
  0% {left: -250px}
  50% {left: 250px;}
  100% {left: -250px; transform: scaleX(-1)}
}

Here's fiddle.

Upvotes: 2

Views: 193

Answers (1)

ketan
ketan

Reputation: 19341

As per your explanation this is what you want to animate.

Rotate animation should be on 50%.

body {
  text-align: center;
}
.cat {
  position: absolute;
  top: 150px;
  left: -250px;
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/ee/dd/e5/eedde5a7ab6c65899c25028ee9224e13.gif);
  background-size: cover;
  width: 100px;
  height: 200px;
  animation: move-ass 10s infinite;
}
@keyframes move-ass {
  0% {left: -250px; transform: scaleX(1)}
   40% {left: 240px; transform: scaleX(1)}
  50% {left: 250px; transform: scaleX(-1)}
  100% {left: -250px; transform: scaleX(-1)}
}
<div class="cat"></div>

Updated Fiddle

Upvotes: 1

Related Questions