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

Question

* {
  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>

问题在第二个动画中出现，它不工作但第一个动画工作得很好但我在我的第二个动画上尝试了一切它仍然不工作。

需要帮助！！谢谢

Answer 1

如果你的动画名称是 flowz 那么你不能使用 flows
您还缺少 animation-duration:

* {
  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>

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

CSS3 animation (keyframe animation issue)

css

animation

keyframe

css-animations

想要更流畅的动画？