css animate background colour

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<div class="ore-2018-test">

  <div class="wrp">
    <div class="inner">

      <div class="row">
        <div class="sm-24">
          <div class="full_width_wrp">
            <div class="header-landingpage banner-mg-wrap">
              <h1>NEW <span class="colour-change">SAFETY &amp; WORKWEAR</span></h1>
              <p>OVER 400 NEW LINES</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

CSS

.ore-2018-test .full_width_wrp {
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.2);
  /*Full Width Fix*/
  margin-bottom: 30px;
}

.ore-2018-test .full_width_wrp h1 {
  text-align: center;
  color: #ed1c24;
  font-size: 70px;
  margin: 35px auto 13px auto;
  line-height: 1;
  font-family: screwfix_betaheavy, arial;
}


/* VW magic happens here */
/* works in IE11 + android */
@media (max-width: 1025px) {
  .ore-2018-test .full_width_wrp h1 {
     font-size: 5.5vw;
  }
}


.ore-2018-test .banner-mg-wrap p {
  font-family: screwfix_betabold;
  color: #636363;
  font-size: 30px;
  text-align: center;
}

.ore-2018-test .full_width_wrp span.colour-change {
  color: #0053a0;
}

.ore-2018-test .banner-mg-wrap {
  height: 180px;
  margin-bottom: 0;
}