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

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

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?

Solution

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;
}