SOURCE

<div class="dh1"></div>
<div class="dh2"></div>

/* .dh1{

  width: 100px;

  height: 100px;

  background: red;

  animation: mydh 20s;

  -webkit-animation: mydh 20s;

}

@keyframes mydh{

  0%{background: red;}

  25%{background: yellow;}

  50%{background: green;}

  75%{background: blue;}

  100%{background: red;}

}

@-webkit-kdyframes mydh{

  0%{background: red;}

  25%{background: yellow;}

  50%{background: green;}

  75%{background: blue;}

  100%{background: red;}

} */

.dh2{
  width: 20px;
  height: 20px;
  /* background: rgba(255,255,255,1); */
  border-color: #fff;
  border-width: 2px 0 0 2px;
  border-style: solid;
  transform: rotate(225deg);
  position: relative;
  left: 0;
  animation: wz 1s;
     -webkit-animation: wz 1s;
}
@keyframes wz{
  0%{ border-color: rgba(255,255,255,1);top: 0;}
  100%{border-color: rgba(255,255,255,0);top:30px;}
}
@-webkit-keyframes wz{
  0%{ border-color: rgba(255,255,255,1);top: 0;}
  100%{ border-color: rgba(255,255,255,0);top: 30px;}
}