@font-face {
    font-family: ObjectAans;
    src: url(objectsans.otf);
  }

  
  body {


    background-color: blue;
    animation: mymove 10s infinite;
  
  
  }

.example1 {
 height: 160px;	
 overflow: hidden;
 position: relative;
 margin-top:290px;
}
.example1 h3 {
 font-size: 130px;
 color: #1E1E1E;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 130px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 10s linear infinite;
 -webkit-animation: example1 10s linear infinite;
 animation: example1 10s linear infinite;
 
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

@keyframes mymove {
  0% {
    background-color: #ffffff;
  }
  10% {
    background-color: #AEA2F0;
  }
  20% {
    background-color: #90DFE0;
  }
  30% {
    background-color: #FFA674;
  }
  40% {
    background-color: #566FDD;
  }
  50% {
    background-color:  #FFB5E6;
  }
  60% {
    background-color:  #FFE86F;
  }
  70% {
    background-color:  #24CE93;
  }
  80% {
    background-color:  #AEA2F0;
  }
  90% {
    background-color:  #FFA674;
  }
  100% {
    background-color:  #ffffff;
  }
}







@media only screen and (max-width: 1000px) {
   .example1 h3 {
    width: 200%;
   }
}

@media only screen and (max-width: 600px) {
  .example1 {
    height: 300px;	
    margin-top:300px;
   }
   .example1 h3 {
    font-size: 140px;
    width: 200%;
   }
}

@media only screen and (max-width: 400px) {
  .example1 {
    height: 300px;	
    margin-top:300px;
   }
   .example1 h3 {
    font-size: 80px;
    width: 400%;
   }
}