CSS3 animation-name

Question

So we can only use 1 animation-name per element right

Answer 1

Rshz S , Not true.

You can apply multiple animations for an element. animation- properties accept multiple comma seperated value.

you can have multiple animations, for example

HTML:
<div></div>

CSS:
div{
height:20px;
width:20px;
position:absolute;
left:40vw;
top:40vw;
border-radius:50%;
background-color:dodgerblue;
animation-name:resize ,changeColor;
animation-duration:2s;
animation-iteration-count:infinite;
}

@keyframes resize{
to{
transform:scale(5);
}
}
@keyframes changeColor{
to{
background-color:red;
}
}

This applies 2 animations to 1 element. you can easily increase this number.

I'll suggest you to always search on net before you ask here. This will only benifit you.

Many good examples , documentations are already available on internet :
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name