Animation loop - css

Question

Hello I've created simple infinite animation using css, but there are a simple problem that I need the animation is loop for ever smoothly.

.rotate{
    width:200px;
    height:200px;
    margin:50px auto;
    background-color:#00e95a;
    animation-name:rotate;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-fill-mode:both;
}
@keyframes rotate {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

    <div class="rotate">

    </div>

kind user · Accepted Answer · 2017-03-23 19:15:36Z

4

Just add animation-timing-function: linear;.

Note: The problem was caused by the default timing state, which is ease.

.rotate {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background-color: #00e95a;
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

<div class="rotate"></div>

edited Mar 23, 2017 at 19:15

answered Mar 23, 2017 at 19:10

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Happy Over a year ago

Aww...beat me to it!

user31782 · Accepted Answer · 2017-03-23 19:16:58Z

0

As @Kind user has mentioned you should hard reset animation-timing-function to linear, because the intial value of animation-timing-function is ease.

reference: https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function

answered Mar 23, 2017 at 19:16

user31782

7,80716 gold badges80 silver badges160 bronze badges

Collectives™ on Stack Overflow

Animation loop - css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related