Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. 0

    Not sure if my answer is exactly what you need. If you want to trigger :hover
    on parent element and affect children apply it to parent element with appropriate children selector. As you want alter only animation speed use animation-duration.

    .m:hover * {
    animation-duration: /*animation of all children*/ 0.4s;
}
    Login or Signup to reply.
  2. 0

    To change the animation speed of all child elements when hovering over the parent element, you can use CSS custom properties (variables) to control the animation duration. This way, you can dynamically adjust the animation duration on hover.

    Here’s how you can modify your code:

    Define a custom property for the animation duration.
    Use this custom property in the animation definitions.
    Change the custom property value on hover.
    Here’s the portion of the code you need to add/modify:

    :root {
  --animation-duration: 1.8s;
  --animation-duration-hover: 0.9s;
}

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

/* Apply the custom property to child elements' animations */
.m1 {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 191, 29);
  border-radius: 100px;
  z-index: 2;
  animation: Pulses2 var(--animation-duration) 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 var(--animation-duration) 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 var(--animation-duration) 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 var(--animation-duration) ease 1s infinite normal forwards;
  filter: blur(6px);
}

/* Change the animation duration on hover */
.m:hover .m1,
.m:hover .m2,
.m:hover .m3,
.m:hover .m4 {
  animation-duration: var(--animation-duration-hover);
}

/* Keyframes remain unchanged */
@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);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search