Активация сразу всех элементов одного класса/Activating all elements of the same class

Question

Создал много элементов одного класса, по задумке при нажатии на один из них должна сработать анимация сразу у всех элементов, но она срабатывает лишь у одного.. Помогите разобраться../I created a lot of elements of one class, according to the idea, when I click on one of them, the animation should run at once for all the elements, but it only works for one.. Help me figure it out..
https://code.sololearn.com/WATp6B4wjWfK/?ref=app

Answer 1

<!--You need to learn more courses on css, that's the way one of them, provided by Sololearn ↓↓↓ :)-->
<!--copy please-->
<div></div>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: colorchange;
animation-duration: 1s;
-webkit-animation-name: colorchange;
-webkit-animation-duration: 1s;
}
@keyframes colorchange {
0% {background-color: red; }
50% {background-color: green; }
100% {background-color: blue; }
}
@-webkit-keyframes colorchange {
0% {background-color: red; }
50% {background-color: green; }
100% {background-color: blue; }
}
</style>

Answer 2

Thank you