Ich will diese 2 Animation arbeitet zusammen

Question

Hallo ich baue eine Stimme Knopf mit einer Animation Regenbogen Hintergrund und eine einfache Animation funktioniert togheter, aber wehn ich es nur die zweite Animation zu starten. kann mir jemand helfen? Danke!

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

Vielen Dank an alle die Antwort!

Answer 1

Die Animationen sollten durch ein Komma getrennt sein.

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>