CODEWITHSUNDEEP
htmlcssanimationkeyframe
egrodo
egrodo

Reputation: 13

How to make CSS animation not reverse after finishing? Example inside

I currently have a picture that is rotating and scaling using keyframes, but my problem is that after every iteration it reverses rotation direction. How do I stop this from happening so that the rotating is smooth in one direction? JSFiddle. See full webpage HTML here: 

<html class="fourzerofour">
<head>
  <!-- Hey, look at you, you know how to view the source code, well done! Here's a unicode cookie: 🍪-->
  <meta charset="UTF-8">
  <title>Egrodo | 404</title>
  <link rel="stylesheet" type="text/css" href="../CSS/error404.css" media="screen, projection" />
  <link rel="stylesheet" type="text/css" href="../CSS/materialize.css" />
  <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
  <link rel='shortcut icon' href='../favicon.ico' type='image/x-icon'/ >
</head>

<body class="fourzerofour">
  <section class="fourzerofour">
    <p class="fourzerofour">
      404 - What have you done?!?
    </p>
    <img draggable="false" class="rotating fourzerofour" src="https://i.imgur.com/n5SVALx.png">
  </section>
</body>

</html>

and my full page CSS here: 

body {
  font-family: 'Raleway', sans-serif;
}
p.fourzerofour {
  font-size: 2.4em;
  color: white;
  display: block;
  margin-top: -2em;
  margin-bottom: 2em;
}

body.fourzerofour {
  height: 100%;
  background-color: darkgrey;
}
section.fourzerofour {
  position: relative;
  height: 100%;
  text-align: center;
  margin-top: 23%;

}

.rotating {
  -webkit-animation: rotating 3s linear infinite;
  -moz-animation: rotating 3s linear infinite;
  -ms-animation: rotating 3s linear infinite;
  -o-animation: rotating 3s linear infinite;
  animation: rotating 3s linear infinite;
  animation-direction: alternate;
  width: 10em;
}

p.fourzerofour + .rotating:active {
  -webkit-filter: invert(1);
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  50% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1):
  }
  100% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
}

@keyframes rotating {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  50% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) sscale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
  100% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
}

Upvotes: 1

Views: 3003

Answers (3)

Jignesh Kheni
Jignesh Kheni

Reputation: 1312

It has animation: rotating 3s linear infinite, where infinite is the transition-duration and here rotating is the transition i.e. why it keeps repeating its animation, removing that will do the trick for you.

Here the JSFiddle.

Upvotes: 0

Derek Story
Derek Story

Reputation: 9593

Get rid of the infinite line and remove the 50% keyframe styles as well as this is the middle of the animation. Instead give the 100% the final animation styles you would like: JS Fiddle

Appending infinite on the animation will have it continually loop.

.rotating {
  -webkit-animation: rotating 3s linear;
  -moz-animation: rotating 3s linear;
  -ms-animation: rotating 3s linear;
  -o-animation: rotating 3s linear;
  animation: rotating 3s linear;
  animation-direction: alternate;
  width: 10em;

}

p.fourzerofour + .rotating:active {
      -webkit-filter: invert(1);

}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  100% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1):
  }

}

@keyframes rotating {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  100% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) sscale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }

}

And if I misunderstood the desired effect and you want it to continually loop in one direction, see @maioman answer

Upvotes: 1

maioman
maioman

Reputation: 18762

if you remove animation-direction:alternate it should be fine;

fiddle

moreover I adjusted rotation in fiddle

Upvotes: 0

Related Questions