私はこの2つのアニメーション作品togheterを望んでいます

Question

こんにちは私は、アニメーションの虹の背景と単純なアニメーションの投票ボタンを構築していますが、私はそれを2番目のアニメーションのスタートを果たした。誰かが私を助けることができる？ありがとうございました！

.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>