如何使动画流畅？

Question

我正在尝试创建一个预加载器，它可以改变它的高度、宽度、边框半径和背景颜色。

动画有效，但在更改之间有一个暂停。如何让动画更流畅？

小提琴： https ://jsfiddle.net/Altair827/ww077qby/4/

 #preloader {
  margin-left: 300px;
  margin-top: 200px;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: violet;
  -webkit-animation-name: colorIt;
          animation-name: colorIt;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes colorIt {
  from {
    background-color: violet;
  }
  to 20%,40%,60%,80%,90%,99% {

  }
  20% {
    background-color: indigo;
    height: 40px;
    width: 40px;
    border-radius: 20px;
  }
  40% {
    background-color: blue;
    height: 50px;
    width: 50px;
    border-radius: 25px;
  }
  60% {
    background-color: green;
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
  80% {
    background-color: yellow;
    height: 70px;
    width: 70px;
    border-radius: 35px;
  }
  90% {
    background-color: orange;
    height: 80px;
    width: 80px;
    border-radius: 40px;
  }
  99% {
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 10px;
  }
}

@keyframes colorIt {
  from {
    background-color: violet;
  }
  to 20%,40%,60%,80%,90%,99% {

  }
  20% {
    background-color: indigo;
    height: 40px;
    width: 40px;
    border-radius: 20px;
  }
  40% {
    background-color: blue;
    height: 50px;
    width: 50px;
    border-radius: 25px;
  }
  60% {
    background-color: green;
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
  80% {
    background-color: yellow;
    height: 70px;
    width: 70px;
    border-radius: 35px;
  }
  90% {
    background-color: orange;
    height: 80px;
    width: 80px;
    border-radius: 40px;
  }
  99% {
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 10px;
  }
}

 <div id="preloader"></div>

原文由 Altair827 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你应该改变你的计时功能：

 animation-timing-function: linear;

您也可以使用短地：

 /* @keyframes duration | timing-function | delay | name */
animation: 3s linear .1s colorIt;

原文由 Francesco 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

CSS 动画的默认 easing 是 ease 。将其设置为 linear 并且应该没有停顿：

 animation-timing-function: linear;

 #preloader {
  margin-left: 300px;
  margin-top: 200px;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: violet;
  -webkit-animation-name: colorIt;
  animation-name: colorIt;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@-webkit-keyframes colorIt {
  from {
    background-color: violet;
  }
  to 20%,
  40%,
  60%,
  80%,
  90%,
  99% {} 20% {
    background-color: indigo;
    height: 40px;
    width: 40px;
    border-radius: 20px;
  }
  40% {
    background-color: blue;
    height: 50px;
    width: 50px;
    border-radius: 25px;
  }
  60% {
    background-color: green;
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
  80% {
    background-color: yellow;
    height: 70px;
    width: 70px;
    border-radius: 35px;
  }
  90% {
    background-color: orange;
    height: 80px;
    width: 80px;
    border-radius: 40px;
  }
  99% {
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 10px;
  }
}
@keyframes colorIt {
  from {
    background-color: violet;
  }
  to 20%,
  40%,
  60%,
  80%,
  90%,
  99% {} 20% {
    background-color: indigo;
    height: 40px;
    width: 40px;
    border-radius: 20px;
  }
  40% {
    background-color: blue;
    height: 50px;
    width: 50px;
    border-radius: 25px;
  }
  60% {
    background-color: green;
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
  80% {
    background-color: yellow;
    height: 70px;
    width: 70px;
    border-radius: 35px;
  }
  90% {
    background-color: orange;
    height: 80px;
    width: 80px;
    border-radius: 40px;
  }
  99% {
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 10px;
  }
}

 <div id="preloader"></div>

原文由 andreas 发布，翻译遵循 CC BY-SA 3.0 许可协议