CODEWITHSUNDEEP
htmlcsscss-animations
godblessstrawberry
godblessstrawberry

Reputation: 5088

Css animation prevent jump to first frame

I want to implement infinite rotation for this indicator. how do I prevent the animation from jumping back to first 45deg frame?

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

#indicator {
  position: relative;
  width: 80px;
  height: 80px;
}

#indicator:before {
  display: block;
  width: 80px;
  height: 80px;
  background: #0095ff;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotate 4s infinite;
  transform: rotate(45deg);
}

#indicator:after {
  display: block;
  width: 80px;
  height: 80px;
  content: "Title";
  display: flex;
  color: white;
  align-items: center;
  font-size: 23px;
  font-family: Times New Roman;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(45deg);
  }
  25% {
    transform: rotate(135deg);
  }
  50% {
    transform: rotate(225deg);
  }
  75% {
    transform: rotate(315deg);
  }
  100% {
    transform: rotate(45deg);
  }
}
<div id="indicator"></div>

Upvotes: 3

Views: 934

Answers (1)

Temani Afif
Temani Afif

Reputation: 274252

Simply remove the last state and re-adjust the % of each one as needed. When the transformation will end with 315deg it will get back immediately to 45deg which is equivalent to 315deg then the animation will start again and it will always run in the same direction.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

#js-waiting-indicator {
  position: relative;
  width: 80px;
  height: 80px;
}

#js-waiting-indicator:before {
  display: block;
  width: 80px;
  height: 80px;
  background: #0095ff;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotate 4s infinite;
  transform: rotate(45deg);
}

#js-waiting-indicator:after {
  display: block;
  width: 80px;
  height: 80px;
  content: "Title";
  display: flex;
  color: white;
  align-items: center;
  font-size: 23px;
  font-family: Times New Roman;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(45deg);
  }
  30% {
    transform: rotate(135deg);
  }
  60% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(315deg);
  }
}
<div id="js-waiting-indicator"></div>

Upvotes: 3

Related Questions