CODEWITHSUNDEEP
css
Jeffrey Goines
Jeffrey Goines

Reputation: 955

Apply CSS Animation on a Particular Element, NOT on its Children

I have a CSS class for flickering animation and can't find a way to not apply it on child buttons inside.

Tried animation: none !importnant but had no luck.

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.useBliinker {
  border: 0.1em dashed #ff6a00;
  animation: blinker 1s linear infinite;
}

.useBliinker>button {
  animation: none !important;
  transition: none !important;
}
<div class="useBliinker">
  <button>Button</button>
</div>

Upvotes: 1

Views: 1917

Answers (2)

Salih Can
Salih Can

Reputation: 56

you can only do it with border

@keyframes btnBorder {
  50% {
    border-color:transparent;
  }
}

.useBliinker {  
  padding: .1em;
  animation: btnBorder 1s linear infinite;
  border: .1em dashed #ff6a00;
}
<div class="useBliinker">
  <button>Button</button>
</div>

Upvotes: 3

BenM
BenM

Reputation: 53198

You can't exclude children from an animation, since you're animating their container as a whole; it's the same as opacity, etc.

You can just animate the border-color instead:

@keyframes blinker {
  50% {
    border-color: #ff6a00;
  }
}

.useBliinker {
  border: 0.1em dashed transparent;
  animation: blinker 1s linear infinite;
}
<div class="useBliinker">
  <button>Button</button>
</div>

Alternatively, you can also animate a psuedo-element instead:

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.useBliinker {  
  padding: .1em;
  position: relative;
}
.useBliinker::after {
  animation: blinker 1s linear infinite;
  border: .1em dashed #ff6a00;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
<div class="useBliinker">
  <button>Button</button>
</div>

Upvotes: 3

Related Questions