Use Different @Keyframes Based on Parent Element Class

Use different @keyframes based on parent element class

You can use CSS variable and you will need only one keyframes that you don't have to change. Simply change the main class that define the color:

.light {

  --c: yellow;

}

.dark {

  --c: darkblue;

}

.box {

  height: 100px;

  margin: 5px;

  box-shadow: 0 0 5px var(--c);

  color:#fff;

  animation: pulseColorGreenMkt 1s infinite linear alternate;

}

@keyframes pulseColorGreenMkt {

  0% {

    background-color: var(--c);

  }

  100% {

    background-color: black;

  }

}

<div class="box light">

  Class defined on the element

</div>

<div class="dark">

  <div class="box">

    Class defined on a parent element

  </div>

</div>

How can I call a CSS animation on a nested element within a parent element?

Looking at your code, these two lines seem to be the problem:

 $(this).removeClass("noGrow");
 $(this).addClass("grow");

$(this) refers to the divHolder element you are binding the focus event to. If you want to change the class of firstDiv, you'll need to change the lines to this:

firstDiv.removeClass('noGrow');
firstDiv.addClass('grow');

However, based on your CSS, I would suggest using toggleClass, and leaving the noGrow class off completely. Your div becomes:

<div class="firstDiv"></div>

and your JS becomes:

divHolder.focus(function () {
    firstDiv.toggleClass('grow');
    console.log('growing!');
});

Finally, if you don't know where in the list of descendants your 'growable' div will be, you can use something like find():

divHolder.focus(function(){
    $(this).find('div').toggleClass('grow');
    // if the div is given an id like #growable we can do this:
    // $(this).find('#growable').toggleClass('grow');
});

Using variables for a CSS animation? (multiple divs using a fade, but I want them to fade to different values)

No need to use a keyframe animation for this when you could use transition.

Here's a working example (with no JavaScript!).

div {

  opacity: 0;

  transition: opacity .5s;

}

input:checked+div {

  opacity: 1;

}

input:checked+div+div {

  opacity: .8;

}

input:checked+div+div+div {

  opacity: .6;

}

input:checked+div+div+div+div {

  opacity: .4;

}

Fade: <input type="checkbox" />

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

Multiple CSS keyframe animations using transform property not working

You cannot animate same attribute ( here transform attribute ) more than once, on a same element, the last one will overwrite other,

You should put your target element into a div, and apply one transform-animation on the div and other transform-animation on the target element....

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}

How to access other class from CSS3 animation

Basically, effects on parent element by his children not exist in CSS (in it's current version).
What you can do is to using Vue. Perceive the mouseenter and mouseleave events of your child element (.lg-card-animation) and add a new class name to .header-grid to representing the hover activation.

Animate a object across the width of its parent using css transforms

You can use a wrapper around your element, set the width of the wrapper to 100%. and animate it.

This way, the translate is applied to the element width, as you state, but the element width matches the container width

.banner { 
  display:block;
  width:100%;
  height:300px;
  background:#0069aa;
  position:relative;
}
.moveme, .movewidth {
  position:absolute;
}
.movewidth {
  width:100px;
  height:100%;  
  background: #edaf02;
  transform: translate3D(0,0,10px)
}
.wrapper {
  width: 100%;
  animation: moveme 10s linear infinite;
}
.moveme { 
  background:#003356;
  width:100px;
  height:100px;  
  transform: translate3D(0,150px,20px)
}
@keyframes moveme {
  0% { transform: translate(0%, 150px) }
  100% { transform: translate(100%, 100px) }
}

demo

As Simon_Weaver points out, it's confusing to have 2 elements with a 100% width; it's not clear which one is the one proposed as a solution.

A better demo

.banner { 

  display:block;

  width:400px;

  height:300px;

  background:#0069aa;

  position:relative;

}

.moveme, .movewidth {

  position:absolute;

}

.movewidth {

  width:100px;

  height:100%;  

  background: #edaf02;

  transform: translate3D(0,0,10px)

}

.wrapper {

  width: 100%;

  -webkit-animation: moveme 1s linear infinite;

  animation: moveme 1s linear infinite;

}

.moveme { 

  background:#003356;

  width:100px;

  height:100px;  

  transform: translate3D(0,150px,20px)

}

@keyframes moveme {

  0% { transform: translate(0%, 150px) }

  100% { transform: translate(100%, 100px) }

}

@-webkit-keyframes moveme {

  0% { transform: translate(0%, 150px) }

  100% { transform: translate(100%, 100px) }

}

  <div class="banner">

      <div class="movewidth">

      </div>

      <div class="wrapper">

      <div class="moveme">

      </div>

      </div>

    </div>

---

Related Topics