Want to change animation speed of all child elements on hovering on the parent element

Question

body {
  padding: 300px;
  background-color: rgb(15, 19, 24);
}

.m {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.8s ease-in-out;
}

.m * {
  transition: all 0.8s ease-in-out;
}

.m *:hover {
  animation: /*animation of all children*/
  0.4s ease 1s infinite normal both;
}

.m1 {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 191, 29);
  border-radius: 100px;
  z-index: 2;
  animation: Pulses2 1.8s ease 1.2s infinite normal both;
}

.m2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgb(255, 191, 29);
  border-radius: 100px;
  z-index: 1;
  animation: Pulses1 1.8s ease-out 1s infinite normal forwards;
}

.m4 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgb(255, 191, 29);
  border-radius: 100px;
  z-index: 0;
  animation: Pulses1 1.8s ease-out 1.4s infinite normal forwards;
}

.m3 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgb(255, 241, 227);
  border-radius: 100px;
  z-index: -2;
  animation: Pulses3 1.8s ease 1s infinite normal forwards;
  filter: blur(6px);
}

@keyframes Pulses1 {
  from {
    transform: scale(0%);
    opacity: 100%;
  }
  to {
    transform: scale(280%);
    opacity: 0%;
  }
}

@keyframes Pulses2 {
  0% {
    background-color: rgb(255, 191, 29);
    transform: scale(100%);
  }
  50% {
    background-color: rgb(255, 243, 139);
    transform: scale(115%);
  }
  100% {
    background-color: rgb(255, 191, 29);
    transform: scale(100%);
  }
}

@keyframes Pulses3 {
  0% {
    transform: scale(990%);
    opacity: 0%;
    background-color: rgb(255, 176, 97);
    ;
  }
  20% {
    opacity: 0%;
  }
  50% {
    transform: scale(400%);
    opacity: 2%;
    background-color: rgb(255, 176, 97);
  }
  70% {
    opacity: 0%;
  }
  100% {
    transform: scale(700%);
    opacity: 0%;
    background-color: rgb(255, 196, 57);
  }
}

<div class="m">
  <div class="m1"></div>
  <div class="m2"></div>
  <div class="m3"></div>
  <div class="m4"></div>
</div>

Here m is the parent and m1 to m4 all child have their own animation. Applying hover transition to increase animation speed to every element causes each element to respond individually. I wanted that if hovering on the parent element makes child elements faster.

I was going for calling all child element together but all elements have unique animations. How it can be done?

Answer 1

If you want to trigger :hover on parent element and affect children, apply it to parent element with appropriate children selector. As you want to alter only animation speed, use animation-duration:

.m:hover * {
    animation-duration: /*animation of all children*/ 0.4s;
}