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

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?

Answer 1

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>