在不同的屏幕尺寸下，用关键帧来改变文本颜色。

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.

我试图让div的文本在屏幕大小不同时改变文本颜色，因为我的页面有一个图片，使文本不可读。

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

我使用了@media和@keyframe CSS动画来实现这一点，但是它不起作用，可能我缺少了一些东西。

HTML:

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:[e-mail]">[e-mail]</a></strong>
              </address>
      </div>
</div> 

CSS:

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.

非常感谢您的帮助。

3 个解决方案

#1

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

css:您没有指定浏览器前缀eg。-webkit-， -moz-， -ms-找到小提琴演示

.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*/

#2

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.

在媒体查询中，您将看到我将宽度减少到300px和600px，这样您就可以很容易地看到更改是否正在发生。

#3

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

试试下面。您不必在媒体查询中再次调用选择器来包装关键帧，因为您已经使用“animationname”属性指向相关的关键帧。

.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;}
    }
}