Question

请查看我的代码，了解我将要讨论的内容：
http://codepen.io/thingsbyting/pen/ywJhL

@-webkit-keyframes change {
  0% {
  background: purple;
  }
  100%{
  background: blue;
  }
}

div {
  background: purple;
  border-radius: 50%;
  width:320px;
  height:320px;
  -webkit-animation:change 3s linear infinite;
  -webkit-transition:background 1s;  
   p {
     padding-top: 120px;
     font-weight: bold;
     color: orange;
     font-size: 30px;
     text-align: center;
   }
}

我正在玩CSS过渡和动画，我希望圆圈的背景颜色能够很好地从紫色过渡到蓝色。然而，当它完成它从0％-100％的过渡并从0％再次开始时，颜色变化闪烁而不是很好地过渡。我怎样才能使这个动画在两种颜色之间连续过渡？

谢谢！

Answer 1

这是解决方案的JSFiddle Demo。改变在这里：

 -webkit-animation:change 3s linear infinite alternate;

有关详细说明，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

Answer 2

您正在寻找animation-direction财产

animation-direction: alternate;

Css过渡和动画

2 个答案: