Make text change color at different screen size with animation using keyframes - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Text

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Text

Description

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

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.section.section-contact{<!-- w w  w .jav a  2 s. com-->
   width:100%;
   height: 70%;
   background-color: #fe523e;
   margin: 0;
   background-size: 100% auto;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.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 */
@keyframes span2 {
   from {background-color: whitesmoke}
   to {background-color: #083858;}
}
@media (max-width: 600px) {
   .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: 300px) {
   .section.section-contact .span1{
      animation-name: span1;
      animation-duration: 5s;
      animation-iteration-count:infinite;
   }
}


      </style> 
 </head> 
 <body> 
  <div class="container-fuid section section-contact" id="contact"> 
   <div class="row text-center"> 
    <h1>Contact Us</h1> 
    <h3> this is a test <span class="span1">this is a test</span> <span class="span2">this is a test</span> </h3> 
    <address> <strong> <i class="icon-phone"></i> Number: </strong> <br> <span>0123123123123</span> 
    <br> <strong> <i class="icon-envelope"></i> EMAIL: <strong> <a href="mailto:hello@me.com">hello@website</a> </strong> </strong> </address> 
    <strong> </strong> 
   </div> 
   <strong> </strong> 
  </div> 
  <strong> </strong>  
 </body>
</html>

Related Tutorials