CSS3 动画（关键帧动画问题）答案

【问题标题】：CSS3 animation (keyframe animation issue)CSS3 动画（关键帧动画问题）
【发布时间】：2017-03-09 00:37:48
【问题描述】：

* {
  margin: 0;
  padding: 0;
}
/**BOX WORKING FINE**/

#box {
  width: 20%;
  height: 130px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  top: 20px;
  left: 30%;
  background-color: blue;
  color: white;
  border-radius: 40px;
}
@keyframes nehal {
  from {
    background-color: blue;
  }
  to {
    background-color: black;
    padding: 10px;
    top: 50px;
    left: 10px;
    background-image: linear-gradient(blue, black);
  }
}
#box {
  animation-name: nehal;
  animation-duration: 4s;
  animation-iteration-count: 3;
  animation-direction: alternate-reverse;
  animation-timing-function: steps(100);
}
/***ISN'T WORKING FINE****/

#zip {
  background-color: red;
  width: 15%;
  height: 130px;
  text-indent: 0px;
  position: relative;
  top: 200px;
  left: 100px;
}
@keyframes flowz {
  from {
    background-color: red;
  }
  to {
    text-align: center;
    background-color: green;
    left: 200px;
  }
}
#zip {
  animation-name: flows;
  animation-delay: 4s;
  animation-iteration-count: 3;
}

<h1>CSS3 Animations &amp; Transitions</h1>
<div id="box">
  <h3>Box!</h3>
</div>
<div id="zip">
  <h4>Flowers</h4>
</div>

问题出现在第二个动画中，该动画无法正常工作，但第一个动画工作正常，但我尝试了第二个动画的所有内容，但仍然无法正常工作。

需要帮助！！谢谢你

【问题讨论】：

(a) 给出正确的animation-name。 (b) 给animation-duration 赋值。没有任何持续时间，就没有动画，因为持续时间的默认值为 0s。 (c) 以防万一您不知道，text-align 属性不可动画/可转换。

标签： css animation css-animations keyframe

【解决方案1】：

如果您的动画名称是flowz，则不能使用flows
您还缺少动画持续时间：

* {
  margin: 0;
  padding: 0;
}
/**BOX WORKING FINE**/

#box {
  width: 20%;
  height: 130px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  top: 20px;
  left: 30%;
  background-color: blue;
  color: white;
  border-radius: 40px;
}
@keyframes nehal {
  from {
    background-color: blue;
  }
  to {
    background-color: black;
    padding: 10px;
    top: 50px;
    left: 10px;
    background-image: linear-gradient(blue, black);
  }
}
#box {
  animation-name: nehal;
  animation-duration: 4s;
  animation-iteration-count: 3;
  animation-direction: alternate-reverse;
  animation-timing-function: steps(100);
}

/***WORKING FINE****/

#zip {
  background-color: red;
  width: 15%;
  height: 130px;
  text-indent: 0px;
  position: relative;
  top: 200px;
  left: 100px;
}
@keyframes flowz {
  from {
    background-color: red;
  }
  to {
    text-align: center;
    background-color: green;
    left: 200px;
  }
}
#zip {
  animation-name: flowz;           /* FIX THIS */
  animation-duration: 4s;          /* ADD THIS */
  animation-delay: 4s;
  animation-iteration-count: 3;
}

<h1>CSS3 Animations &amp; Transitions</h1>
<div id="box">
  <h3>Box!</h3>
</div>
<div id="zip">
  <h4>Flowers</h4>
</div>

想要更流畅的动画？

不要使用top和left，而是transform

* {margin:0; padding:0; box-sizing: border-box;}

#box {
  position: relative;
  width: 80px;
  height: 80px;
  transform: translate(0px, 20px);
  animation: anim1 4s 0s alternate infinite;
  background:#444;
}

@keyframes anim1 {
  to {
    transform: translate(50px, 10px);
    background: chocolate;
  }
}



#zip {
  background-color: #0bf;
  width: 80px;
  height: 80px;
  position: relative;
  top:30px;
  animation: anim2 2s 1s alternate infinite;
}

@keyframes anim2 {
  to {
    background-color: #f0b;
    transform: translateX(200px);
  }
}

<div id="box"></div>
<div id="zip"></div>

【讨论】：