CSS3 animation-name | Sololearn: Learn to code for FREE!

+1

CSS3 animation-name

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

1/7/2020 1:36:40 PM

Rshz S

1 Answer

New Answer

+2

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