CSS3 animation-name | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

CSS3 animation-name

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

7th Jan 2020, 1:36 PM
Rshz S
Rshz S - avatar
1 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
7th Jan 2020, 3:43 PM
🇮🇳Omkar🕉 - avatar