Scale animation not working on the element why?

Question

I add the beaton-short class containing the beat animation to the .expand-inside-bracket elemet which is the text inside the brackets. I expect the beating animation but nothing works. Why? and how to fix this?

function bracketBeatStart() {
    const insideBracket = document.querySelector('.expand-inside-bracket');
    insideBracket.classList.add("beaton-short");
}

setTimeout(() => {
    bracketBeatStart();
}, 2000);

.expand-inside-bracket {
  color: #fc0303;
  text-shadow: 1px 1px 2px #100021;
}
.label {
  position: relative;
  font-family: "Vazir";
  direction: rtl;
  filter: drop-shadow(1px 1px 1px #100021) drop-shadow(1px .04em 1px #0d021a);
  text-align: center;
  width: 100%;
  color: #f8f7fa;
  margin: 0 auto;
  opacity: 0; 
  top:  4vh;
}


.beaton-short {
  animation: beaton-short 1.5s ease-in-out infinite both;
}

@keyframes beaton-short {
  0% { transform: scale(1) }
  50% { transform: scale(0.97) }
  100% { transform: scale(1) }
}

<div class="label-container">
   <p class="label" 
   ><span class="right-arrow expand-arrow">‹</span>
   <div id="label-group">
      This forest  <span class="expand-colored">is </span> <span class="expand-bracket">&nbsp;[&nbsp;</span><span class="expand-inside-bracket">Magical</span><span class="expand-bracket">&nbsp;]&nbsp;</span> really
   </div>
   <span class="left-arrow expand-arrow">›</span>
   </p>
</div>

score 0 · Accepted Answer · answered Jan 20 '21 at 18:48

It's currently an inline element and can't have transform, adding display: inline-block; would solve this:

function bracketBeatStart() {
    const insideBracket = document.querySelector('.expand-inside-bracket');
    insideBracket.classList.add("beaton-short");
}

setTimeout(() => {
    bracketBeatStart();
}, 2000);

.expand-inside-bracket {
  color: #fc0303;
  text-shadow: 1px 1px 2px #100021;
}
.label {
  position: relative;
  font-family: "Vazir";
  direction: rtl;
  filter: drop-shadow(1px 1px 1px #100021) drop-shadow(1px .04em 1px #0d021a);
  text-align: center;
  width: 100%;
  color: #f8f7fa;
  margin: 0 auto;
  opacity: 0; 
  top:  4vh;
}


.beaton-short {
  display: inline-block;
  animation: beaton-short 1.5s ease-in-out infinite both;
}

@keyframes beaton-short {
  0% { transform: scale(1) }
  50% { transform: scale(0.97) }
  100% { transform: scale(1) }
}

<div class="label-container">
   <p class="label" 
   ><span class="right-arrow expand-arrow">‹</span>
   <div id="label-group">
      This forest  <span class="expand-colored">is </span> <span class="expand-bracket">&nbsp;[&nbsp;</span><span class="expand-inside-bracket">Magical</span><span class="expand-bracket">&nbsp;]&nbsp;</span> really
   </div>
   <span class="left-arrow expand-arrow">›</span>
   </p>
</div>

Scale animation not working on the element why?

1 Answers1