CSS3 动画错误

Question

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 1s;
}

@-webkit-keyframes {
  0% {background-color:#4CAF50;}
25%  {background-color: red;}
50% {background-color: yellow;}
75% {background-color: blue;}
100% {background-color: orange;}
}
.button2:hover {
  height: 250px;
  min-width: 200px;
  font-size: 75px;
  font-family: american captain;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  transform: rotate(360deg);
}

<button class="button button2">Shadow on Hover</button>

我已经开始学习 css3 动画了。除了我在“关键帧”中放入的颜色变化之外，我想做的所有动画似乎都运行良好。我从中学习动画的网站显示了完全相同的方式，但它似乎不适用于我的项目。任何帮助将不胜感激。谢谢:-)

Answer 1

你必须给动画一个名字......然后将该动画应用为一个属性......

@-webkit-keyframes color-change {
  0% {
    background-color: #4CAF50;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  75% {
    background-color: blue;
  }
  100% {
    background-color: orange;
  }
}

.button {
  animation: color-change 12s ease infinite;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  animation: color-change 12s ease infinite;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 1s;
}
@-webkit-keyframes color-change {
  0% {
    background-color: #4CAF50;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  75% {
    background-color: blue;
  }
  100% {
    background-color: orange;
  }
}
.button2:hover {
  height: 250px;
  min-width: 200px;
  font-size: 75px;
  font-family: american captain;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transform: rotate(360deg);
}

<button class="button button2">Shadow on Hover</button>