Why isn't my SPAN CLASS= with _several_ parameters working?

Question

I need to apply several parameters to my text via span class= element. While i'm absolutely precisely following the suggested format - parameters are to be separated by space - my 1st parameter is not working (removing blur filter from the word ATTENTION!).

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: #f92504;
  margin: 0.7% 0 1.4% 1vw;
  text-shadow: 0em 0.12em 0.15em rgba(0, 102, 204, 0.2), 0.09em 0.15em 0.15em rgba(249, 37, 4, 0.1), -0.09em 0.15em 0.15em rgba(249, 37, 4, 0.1);
  font-size: calc(0.5em + 2.3vw);
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  font-weight: 400;
  word-wrap: break-word;
  text-shadow: none;     /* МОЖЕТ И ПОСТАВИТЬ ЛЕГКУЮ ТЕНЬ...? */
  margin: 0% 1vw 2% 1vw;
  font-size: calc(0.35em + 1.5vw);
}

.blur_filter_off {
  animation-name: blur_decrease;
  animation-timing-function: linear;
  animation-duration: 2s;
}

@keyframes blur_decrease {
from { filter: blur(0.35em); }
to { filter: blur(0); }
}

.grayscale_filter_off {
animation-name: grayscale_decrease;
animation-timing-function: linear;
animation-duration: 2s;
}

@keyframes grayscale_decrease {
from { filter: grayscale(85%); }
to { filter: grayscale(0); }
}

    <div class="comment_box">
    <div class="comment_title"><span class="blur_filter_off grayscale_filter_off">ATTENTION!</span>
    </div>
    <div class="comment_text"><span class="blur_filter_off">Comment: Lorem ipsum dolor sit amet...</span>
    </div>
    </div>

<br>

What is wrong with my code please?

abney317 · Accepted Answer · 2019-11-15T16:40:29.393

Your grayscale_filter_off class is overriding your blur_filter_off class because they are setting the same properties.

In order to run the 2 animations at the same time, you would need to use another class that runs them both.

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: #f92504;
  margin: 0.7% 0 1.4% 1vw;
  text-shadow: 0em 0.12em 0.15em rgba(0, 102, 204, 0.2), 0.09em 0.15em 0.15em rgba(249, 37, 4, 0.1), -0.09em 0.15em 0.15em rgba(249, 37, 4, 0.1);
  font-size: calc(0.5em + 2.3vw);
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  font-weight: 400;
  word-wrap: break-word;
  text-shadow: none;
  /* МОЖЕТ И ПОСТАВИТЬ ЛЕГКУЮ ТЕНЬ...? */
  margin: 0% 1vw 2% 1vw;
  font-size: calc(0.35em + 1.5vw);
}

.blur_filter_off {
  animation-name: blur_decrease;
  animation-timing-function: linear;
  animation-duration: 2s;
}

@keyframes blur_decrease {
  from {
    filter: blur(0.35em);
  }
  to {
    filter: blur(0);
  }
}

.grayscale_filter_off {
  animation-name: grayscale_decrease;
  animation-timing-function: linear;
  animation-duration: 2s;
}

@keyframes grayscale_decrease {
  from {
    filter: grayscale(85%);
  }
  to {
    filter: grayscale(0);
  }
}

.grayscale_blur_filters_off {
  animation-name: grayscale_blur_decrease;
  animation-timing-function: linear;
  animation-duration: 2s;
}

@keyframes grayscale_blur_decrease {
  from {
    filter: grayscale(85%) blur(0.35em);
  }
  to {
    filter: grayscale(0) blur(0);
  }
}

<div class="comment_box">
  <div class="comment_title"><span class="grayscale_blur_filters_off">ATTENTION!</span>
  </div>
  <div class="comment_text"><span class="blur_filter_off">Comment: Lorem ipsum dolor sit amet...</span>
  </div>
</div>

Hi Abney, sorry, but looks like your approach is not working for some reason. Look at this fiddle: https://jsfiddle.net/4pwkudez/ Now blur reduction works, while grayscale reduction - doesn't. I've increased animation time to 5sec and decreased grayscale reduction to 50% only (instead of 0) for easier tracing of whether the code finally works or not. Any ideas why is this so? — HexenSage, Nov 15 '19 at 09:38
Your animations had the same issue where they were both trying to change the "filter" which was conflicting. So you'd need to use 1 animation that sets both filters at the same time also. Updated answer. — abney317, Nov 15 '19 at 16:41

Why isn't my SPAN CLASS= with _several_ parameters working?

1 Answers1