SpongeBOB
Well-Known Coder
Hi,
I have set two CSS animation with @keyframes.
When I launch them individualy it's work. but when I try togethere only one is running... any ideas ?
I have set two CSS animation with @keyframes.
When I launch them individualy it's work. but when I try togethere only one is running... any ideas ?
CSS:
@keyframes fieldsetLoginAnim {
0% {transform: scale(0,0);}
25% {transform: scale(1.2,1.2);}
50% {transform: scale(0.8,0.8);}
75% {transform: scale(1.1,1.1);}
100% {transform: scale(1,1);}
}
.FLA {
animation-name: fieldsetLoginAnim;
animation-duration: 1s;
animation-timing-function: ease-out;
}
@keyframes TransBG {
to {background-color: rgba(var(--bg-fieldset-color-raw), 0.75);}
}
.TBG {
animation-name: TransBG;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
HTML:
<fieldset class="FLA TBG" style="width: 600px;background-color: var(--bg-fieldset-color)">Hello world<br></fieldset>