我想要这 2 部动画作品

Question

嗨，我

正在构建一个带有动画彩虹背景和简单动画作品的投票按钮，但是当我播放它时，只有第二个动画开始。 有人可以帮助我吗？ 谢谢！

.btn-vote { /* this is the button */
/* rainbow background */
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  -webkit-animation: rainbow 7s ease infinite;
-z-animation: rainbow 7s ease infinite;
-o-animation: rainbow 7s ease infinite;
  animation: rainbow 7s ease infinite;
  /* simple animation */
  animation: vota linear 0.8s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: vota linear 0.8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: vota linear 0.8s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: vota linear 0.8s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: vota linear 0.8s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
  width: 100px;
}
/* This is the rainbow animation */
@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
/* This is the simple animation */
@keyframes vota{
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  25% {
    transform:  rotate(10deg) scaleX(1.10) scaleY(1.10) ;
  }
  50% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  76% {
    transform:  rotate(-10deg) scaleX(1.10) scaleY(1.10) ;
  }
  100% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}
@-moz-keyframes vota{
  0% {
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  25% {
    -moz-transform:  rotate(10deg) scaleX(1.10) scaleY(1.10) ;
  }
  50% {
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  76% {
    -moz-transform:  rotate(-10deg) scaleX(1.10) scaleY(1.10) ;
  }
  100% {
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}
@-webkit-keyframes vota {
  0% {
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  25% {
    -webkit-transform:  rotate(10deg) scaleX(1.10) scaleY(1.10) ;
  }
  50% {
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  76% {
    -webkit-transform:  rotate(-10deg) scaleX(1.10) scaleY(1.10) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}
@-o-keyframes vota {
  0% {
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  25% {
    -o-transform:  rotate(10deg) scaleX(1.10) scaleY(1.10) ;
  }
  50% {
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  76% {
    -o-transform:  rotate(-10deg) scaleX(1.10) scaleY(1.10) ;
  }
  100% {
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}
@-ms-keyframes vota {
  0% {
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  25% {
    -ms-transform:  rotate(10deg) scaleX(1.10) scaleY(1.10) ;
  }
  50% {
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  76% {
    -ms-transform:  rotate(-10deg) scaleX(1.10) scaleY(1.10) ;
  }
  100% {
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

<div class="btn btn-vote waves-effect">
                <i class="mdi mdi-thumb-up"></i> <span class="hidden-xs">Vota</span>
            </div>

谢谢大家的回答！

Answer 1

动画应用逗号分隔。

animation: rainbow 7s ease infinite, vota linear 0.8s;

.btn-vote {
  /* this is the button */
  /* rainbow background */
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  animation: rainbow 7s ease infinite, vota linear 0.8s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  width: 100px;
}
/* This is the rainbow animation */
@keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}
/* This is the simple animation */
@keyframes vota {
  0% {
    transform: rotate(0deg) scaleX(1.00) scaleY(1.00);
  }
  25% {
    transform: rotate(10deg) scaleX(1.10) scaleY(1.10);
  }
  50% {
    transform: rotate(0deg) scaleX(1.00) scaleY(1.00);
  }
  76% {
    transform: rotate(-10deg) scaleX(1.10) scaleY(1.10);
  }
  100% {
    transform: rotate(0deg) scaleX(1.00) scaleY(1.00);
  }
}

<div class="btn btn-vote waves-effect">
  <i class="mdi mdi-thumb-up"></i> <span class="hidden-xs">Vota</span>
</div>