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





问题是第二个动画不起作用,但是第一个动画效果很好,但是我尝试了第二个动画的所有功能,但仍然无法正常工作。

需要帮忙!!谢谢

最佳答案

如果动画名称为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>





想要更流畅的动画?

不要使用topleft,而是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动画(关键帧动画问题),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42039924/

10-12 12:54
查看更多