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
• 您还缺少动画持续时间:

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