make text change color at different screen size with animation using keyframes

Question

I am trying to make text of the div change text color when it gets to different screen size because my webpage has a picture viz making the text not readable.

I've used @media and @keyframe CSS animation to achieve that but it doesn't work, maybe there's something I'm missing.

HTML:

<div class="container-fuid section section-contact" id="contact">
    <div class="row text-center">
            <h1>Contact Us</h1>
                <h3>
                    Looking for a quo<span class="span1">te for your next</span> <spanclass="span2">project?</span>
                </h3>
                  <address>
                    <strong><i class="icon-phone"></i> PHONE NUMBER:</strong><br>
                       <span>0000000000000</span><br>
                    <strong><i class="icon-envelope"></i> EMAIL:</strong<br>
                     <strong> <a href="mailto:hello@me.com">hello@me.com</a></strong>
              </address>
      </div>
</div> 

CSS:

.section.section-contact{
    width:100%;
    height: 70%;
    background-color: #fe523e;
    margin: 0;
    background-size: 100% auto;
    background-image:url('../img/contact-right.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 70.05%;

}

@media all and (min-width: 320px) and (max-width: 900px) {
.section.section-contact{
    background-size: 100%;

  }
}
.section.section-contact div {
    font-weight: 100;
    font-size: 20px;
}

.section.section-contact h1{
    font-weight: 900;
    font-size: 3em;
    color: #083858;
    text-transform: uppercase;
    padding-top: 30px;
}

.section.section-contact h3{
    font-weight: 400;
    font-size: 30px;
    color: #083858;
    text-transform: uppercase;
    padding-top: 20px;
    white-space: nowrap;
    text-align: center;

}

/** make text color change at different screen size BEGIN */

.section.section-contact .span2{
    animation-name: span2; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}

@media (max-width: 1356px) {
    .section.section-contact .span2{
    @keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
    }
}
.section.section-contact .span1{
    animation-name: span1; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}

@media (min-width: 1200px) {
     .section.section-contact .span1{
    @keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
    }
}
/** make text color change at different screen size  END*/

Any help would be much appreciated.

Answer 1

Try the below. You don't have to call the selectors again inside the media query wrapping the keyframes as you are already pointing to the relevant keyframe with the "animation-name" property

.section.section-contact .span2{
    animation-name: span2; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}

@media (max-width: 1356px) {
    @keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
    }
}
.section.section-contact .span1{
    animation-name: span1; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}

@media (min-width: 1200px) {
    @keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
    }
}

Answer 2

css: you did not specify browser prefix eg. -webkit-, -moz-, -ms- find fiddle demo

.section.section-contact{
    width:100%;
    height: 70%;
    background-color: #fe523e;
    margin: 0;
    background-size: 100% auto;
    background-image:url('../img/contact-right.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 70.05%;

}

@media all and (min-width: 320px) and (max-width: 900px) {
.section.section-contact{
    background-size: 100%;

  }
}
.section.section-contact div {
    font-weight: 100;
    font-size: 20px;
}

.section.section-contact h1{
    font-weight: 900;
    font-size: 3em;
    color: #083858;
    text-transform: uppercase;
    padding-top: 30px;
}

.section.section-contact h3{
    font-weight: 400;
    font-size: 30px;
    color: #083858;
    text-transform: uppercase;
    padding-top: 20px;
    white-space: nowrap;
    text-align: center;

}

/** make text color change at different screen size BEGIN */

.section.section-contact .span2{
    -webkit-animation: span2 5s infinite;
    -moz-animation: span2 5s infinite; 
    -ms-animation: span2 5s infinite; 
    animation: span2 5s infinite;
}

@media (max-width: 1356px) {
        @-webkit-keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
        @-moz-keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
        @-ms-keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
        @keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
}
.section.section-contact .span1{
    -webkit-animation: span1 5s infinite;
    -moz-animation: span1 5s infinite; 
    -ms-animation: span1 5s infinite; 
    animation: span1 5s infinite;
}

@media (min-width: 1200px) {

     @-webkit-keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
     @-moz-keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
     @-ms-keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
     @keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
}
/** make text color change at different screen size  END*/

Answer 3

move your keyframes outside the media query, and then copy your animation-name, iteration-count, etc codes inside the media query

@keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }

@media (max-width: 1356px) {
.section.section-contact .span2{
    animation-name: span2; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}
}
    @keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }

@media (min-width: 1200px) {
.section.section-contact .span1{
    animation-name: span1; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}
}

Working fiddle - you will see I've decreased the width to 300px and 600px in the media queries so that you can easily view the change is happening or not.