@import url(https://purechocolate.org.uk/css/pcstyle.css);
@import url(pcstyle.css);
:root{
--pclblue :#008888;
--pcblue  :#000066;
--pcdblue :#0000A0;
--pcred   :#551133;
--pcvred  :#991133;
--pcgrey  :#888888;
--pcwhite :#FFFFDD;
--pcorange:#FF8141;
--pcgreen :#73AD21;
}
body{
  background-color: var(--pcwhite);
  color:            var(--pcdblue);
}

div{
  border:           1px solid var(--pcvred);
}

.full{
  display:    block;
  width:      40%;
  min-height: 20%;
  height:     auto;
  text-align: center;
  margin:     auto;
  padding:    10%;
}
.hide{
  display: none;
  width:   0%;
  height:  0%;
}
.topr{
  width:        40px;
  margin-left:  calc(100% + 75px);
  margin-top:   calc(0% + -120px);
}
.left{
  width:        calc(95%);
  margin-left:  0;
  margin-top:   0;
}
.cir{
  cx:           50;
  cy:           50;
  r :           40;
  stroke:       #000000;
  stroke-width: 2;
}
.redc{
  fill:         var(--pcvred);
}
.greenc{
  fill:         var(--pcgreen);
}
.orangec{
  fill:         var(--pcorange);
}
.whitec{
  fill:         var(--pcwhite);
}
.pcredtoorange
{
  animation: RedtoOrange 12s infinite;

}
.pcredlight
{
  animation: RedLight 12s infinite;

}
.pcorangelight
{
  animation: OrangeLight 12s infinite;

}
.pcgreenlight
{
  animation: GreenLight 12s infinite;

}
@keyframes RedtoOrange{
      0%,   25% {fill: var(--pcwhite);}
      50%,  75% {fill: var(--pcorange);}
      90%, 100% {fill: var(--pcvred);}
}
@keyframes RedLight{
       0%,  40% {fill: var(--pcvred);}
      50%,  90% {fill: var(--pcwhite);}
     100%       {fill: var(--pcvred);}
}
@keyframes OrangeLight{
       0%, 15%  {fill: var(--pcwhite);}
      25%, 40%  {fill: var(--pcorange);}
      50%, 65%  {fill: var(--pcwhite);}
      75%, 90%  {fill: var(--pcorange);}
     100%       {fill: var(--pcwhite);}
}
@keyframes GreenLight{
       0%,  40% {fill: var(--pcwhite);}
      50%,  65% {fill: var(--pcgreen);}
      75%, 100% {fill: var(--pcwhite);}
}

// Failed items below
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="5s" additive="sum" fill="freeze"/>
.notused {
  attributeName: 'fill';
  attributeType: 'XML';
  from:     var(--pcwhite);
  to:       var(--pcorange);
  dur:      3s;
}
<![CDATA[

  @keyframes fill {
      0% {fill: black;}
      50% {fill: white;}
      100% {fill: black;}
  }
  #fill {
      fill: black;
      animation-name: fill;
      animation-duration: 3s;
      animation-iteration-count: infinite;
  }
]]>

@keyframes colorChange {
    0%{fill:#ff0000}
    50%{fill:#000}
    100%{fill: #ff0000}
}
.box {
    width:200px;
    height:200px;
    animation: colorChange 3s infinite;
}