'Chromatic triangle'

Segi tiga kromatik, warna-warni bercahaya. Sedap mata memandang.

Demo

HTML view ▼

<div style="background: #134f5c; position: relative; height:500px;">
<div class='tri'>
  <div class='side'>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
  </div>
  <div class='side'>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
  </div>
  <div class='side'>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
    <div class='ring'></div>
  </div>
</div>
</div>
<style> 
.tri {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 50px;
  height: 50px;
}
.tri .side {
  width: 50px;
  height: 50px;
  position: absolute;
  transform-origin: center center;
}
.tri .side:nth-child(1) {
  transform: translateX(-100px);
}
.tri .side:nth-child(2) {
  transform: translateX(0px);
}
.tri .side:nth-child(3) {
  transform: translateX(100px);
}
.tri .side:nth-child(2) {
  transform: translateY(-150px);
}
.tri .ring {
  width: 50px;
  height: 50px;
  position: absolute;
  background: white;
  -webkit-animation-name: rotate, cromatic;
          animation-name: rotate, cromatic;
  -webkit-animation-duration: 3s, 3s;
          animation-duration: 3s, 3s;
  -webkit-animation-timing-function: linear, linear;
          animation-timing-function: linear, linear;
  -webkit-animation-iteration-count: infinite, infinite;
          animation-iteration-count: infinite, infinite;
  opacity: 0.5;
  box-shadow: 0 0 30px #cfe2f3;
  border-radius: 20%;
}
.side:nth-child(1) .ring:nth-child(0) {
  margin: 0 0 0 0px;
  z-index: 0;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.side:nth-child(1) .ring:nth-child(1) {
  margin: 0 0 0 6.6666666667px;
  z-index: 1;
  -webkit-animation-delay: 0.0333333333s;
          animation-delay: 0.0333333333s;
}
.side:nth-child(1) .ring:nth-child(2) {
  margin: 0 0 0 13.3333333333px;
  z-index: 2;
  -webkit-animation-delay: 0.0666666667s;
          animation-delay: 0.0666666667s;
}
.side:nth-child(1) .ring:nth-child(3) {
  margin: 0 0 0 20px;
  z-index: 3;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.side:nth-child(1) .ring:nth-child(4) {
  margin: 0 0 0 26.6666666667px;
  z-index: 4;
  -webkit-animation-delay: 0.1333333333s;
          animation-delay: 0.1333333333s;
}
.side:nth-child(1) .ring:nth-child(5) {
  margin: 0 0 0 33.3333333333px;
  z-index: 5;
  -webkit-animation-delay: 0.1666666667s;
          animation-delay: 0.1666666667s;
}
.side:nth-child(1) .ring:nth-child(6) {
  margin: 0 0 0 40px;
  z-index: 6;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.side:nth-child(1) .ring:nth-child(7) {
  margin: 0 0 0 46.6666666667px;
  z-index: 7;
  -webkit-animation-delay: 0.2333333333s;
          animation-delay: 0.2333333333s;
}
.side:nth-child(1) .ring:nth-child(8) {
  margin: 0 0 0 53.3333333333px;
  z-index: 8;
  -webkit-animation-delay: 0.2666666667s;
          animation-delay: 0.2666666667s;
}
.side:nth-child(1) .ring:nth-child(9) {
  margin: 0 0 0 60px;
  z-index: 9;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.side:nth-child(1) .ring:nth-child(10) {
  margin: 0 0 0 66.6666666667px;
  z-index: 10;
  -webkit-animation-delay: 0.3333333333s;
          animation-delay: 0.3333333333s;
}
.side:nth-child(1) .ring:nth-child(11) {
  margin: 0 0 0 73.3333333333px;
  z-index: 11;
  -webkit-animation-delay: 0.3666666667s;
          animation-delay: 0.3666666667s;
}
.side:nth-child(1) .ring:nth-child(12) {
  margin: 0 0 0 80px;
  z-index: 12;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.side:nth-child(1) .ring:nth-child(13) {
  margin: 0 0 0 86.6666666667px;
  z-index: 13;
  -webkit-animation-delay: 0.4333333333s;
          animation-delay: 0.4333333333s;
}
.side:nth-child(1) .ring:nth-child(14) {
  margin: 0 0 0 93.3333333333px;
  z-index: 14;
  -webkit-animation-delay: 0.4666666667s;
          animation-delay: 0.4666666667s;
}
.side:nth-child(1) .ring:nth-child(15) {
  margin: 0 0 0 100px;
  z-index: 15;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.side:nth-child(1) .ring:nth-child(16) {
  margin: 0 0 0 106.6666666667px;
  z-index: 16;
  -webkit-animation-delay: 0.5333333333s;
          animation-delay: 0.5333333333s;
}
.side:nth-child(1) .ring:nth-child(17) {
  margin: 0 0 0 113.3333333333px;
  z-index: 17;
  -webkit-animation-delay: 0.5666666667s;
          animation-delay: 0.5666666667s;
}
.side:nth-child(1) .ring:nth-child(18) {
  margin: 0 0 0 120px;
  z-index: 18;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.side:nth-child(1) .ring:nth-child(19) {
  margin: 0 0 0 126.6666666667px;
  z-index: 19;
  -webkit-animation-delay: 0.6333333333s;
          animation-delay: 0.6333333333s;
}
.side:nth-child(1) .ring:nth-child(20) {
  margin: 0 0 0 133.3333333333px;
  z-index: 20;
  -webkit-animation-delay: 0.6666666667s;
          animation-delay: 0.6666666667s;
}
.side:nth-child(1) .ring:nth-child(21) {
  margin: 0 0 0 140px;
  z-index: 21;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.side:nth-child(1) .ring:nth-child(22) {
  margin: 0 0 0 146.6666666667px;
  z-index: 22;
  -webkit-animation-delay: 0.7333333333s;
          animation-delay: 0.7333333333s;
}
.side:nth-child(1) .ring:nth-child(23) {
  margin: 0 0 0 153.3333333333px;
  z-index: 23;
  -webkit-animation-delay: 0.7666666667s;
          animation-delay: 0.7666666667s;
}
.side:nth-child(1) .ring:nth-child(24) {
  margin: 0 0 0 160px;
  z-index: 24;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.side:nth-child(1) .ring:nth-child(25) {
  margin: 0 0 0 166.6666666667px;
  z-index: 25;
  -webkit-animation-delay: 0.8333333333s;
          animation-delay: 0.8333333333s;
}
.side:nth-child(1) .ring:nth-child(26) {
  margin: 0 0 0 173.3333333333px;
  z-index: 26;
  -webkit-animation-delay: 0.8666666667s;
          animation-delay: 0.8666666667s;
}
.side:nth-child(1) .ring:nth-child(27) {
  margin: 0 0 0 180px;
  z-index: 27;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.side:nth-child(1) .ring:nth-child(28) {
  margin: 0 0 0 186.6666666667px;
  z-index: 28;
  -webkit-animation-delay: 0.9333333333s;
          animation-delay: 0.9333333333s;
}
.side:nth-child(1) .ring:nth-child(29) {
  margin: 0 0 0 193.3333333333px;
  z-index: 29;
  -webkit-animation-delay: 0.9666666667s;
          animation-delay: 0.9666666667s;
}
.side:nth-child(1) .ring:nth-child(30) {
  margin: 0 0 0 200px;
  z-index: 30;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.side:nth-child(2) .ring:nth-child(0) {
  margin: 0px 0 0 0px;
  z-index: 30;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.side:nth-child(2) .ring:nth-child(1) {
  margin: 5px 0 0 -3.3333333333px;
  z-index: 29;
  -webkit-animation-delay: 2.0333333333s;
          animation-delay: 2.0333333333s;
}
.side:nth-child(2) .ring:nth-child(2) {
  margin: 10px 0 0 -6.6666666667px;
  z-index: 28;
  -webkit-animation-delay: 2.0666666667s;
          animation-delay: 2.0666666667s;
}
.side:nth-child(2) .ring:nth-child(3) {
  margin: 15px 0 0 -10px;
  z-index: 27;
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}
.side:nth-child(2) .ring:nth-child(4) {
  margin: 20px 0 0 -13.3333333333px;
  z-index: 26;
  -webkit-animation-delay: 2.1333333333s;
          animation-delay: 2.1333333333s;
}
.side:nth-child(2) .ring:nth-child(5) {
  margin: 25px 0 0 -16.6666666667px;
  z-index: 25;
  -webkit-animation-delay: 2.1666666667s;
          animation-delay: 2.1666666667s;
}
.side:nth-child(2) .ring:nth-child(6) {
  margin: 30px 0 0 -20px;
  z-index: 24;
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
.side:nth-child(2) .ring:nth-child(7) {
  margin: 35px 0 0 -23.3333333333px;
  z-index: 23;
  -webkit-animation-delay: 2.2333333333s;
          animation-delay: 2.2333333333s;
}
.side:nth-child(2) .ring:nth-child(8) {
  margin: 40px 0 0 -26.6666666667px;
  z-index: 22;
  -webkit-animation-delay: 2.2666666667s;
          animation-delay: 2.2666666667s;
}
.side:nth-child(2) .ring:nth-child(9) {
  margin: 45px 0 0 -30px;
  z-index: 21;
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}
.side:nth-child(2) .ring:nth-child(10) {
  margin: 50px 0 0 -33.3333333333px;
  z-index: 20;
  -webkit-animation-delay: 2.3333333333s;
          animation-delay: 2.3333333333s;
}
.side:nth-child(2) .ring:nth-child(11) {
  margin: 55px 0 0 -36.6666666667px;
  z-index: 19;
  -webkit-animation-delay: 2.3666666667s;
          animation-delay: 2.3666666667s;
}
.side:nth-child(2) .ring:nth-child(12) {
  margin: 60px 0 0 -40px;
  z-index: 18;
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
.side:nth-child(2) .ring:nth-child(13) {
  margin: 65px 0 0 -43.3333333333px;
  z-index: 17;
  -webkit-animation-delay: 2.4333333333s;
          animation-delay: 2.4333333333s;
}
.side:nth-child(2) .ring:nth-child(14) {
  margin: 70px 0 0 -46.6666666667px;
  z-index: 16;
  -webkit-animation-delay: 2.4666666667s;
          animation-delay: 2.4666666667s;
}
.side:nth-child(2) .ring:nth-child(15) {
  margin: 75px 0 0 -50px;
  z-index: 15;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.side:nth-child(2) .ring:nth-child(16) {
  margin: 80px 0 0 -53.3333333333px;
  z-index: 14;
  -webkit-animation-delay: 2.5333333333s;
          animation-delay: 2.5333333333s;
}
.side:nth-child(2) .ring:nth-child(17) {
  margin: 85px 0 0 -56.6666666667px;
  z-index: 13;
  -webkit-animation-delay: 2.5666666667s;
          animation-delay: 2.5666666667s;
}
.side:nth-child(2) .ring:nth-child(18) {
  margin: 90px 0 0 -60px;
  z-index: 12;
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
.side:nth-child(2) .ring:nth-child(19) {
  margin: 95px 0 0 -63.3333333333px;
  z-index: 11;
  -webkit-animation-delay: 2.6333333333s;
          animation-delay: 2.6333333333s;
}
.side:nth-child(2) .ring:nth-child(20) {
  margin: 100px 0 0 -66.6666666667px;
  z-index: 10;
  -webkit-animation-delay: 2.6666666667s;
          animation-delay: 2.6666666667s;
}
.side:nth-child(2) .ring:nth-child(21) {
  margin: 105px 0 0 -70px;
  z-index: 9;
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}
.side:nth-child(2) .ring:nth-child(22) {
  margin: 110px 0 0 -73.3333333333px;
  z-index: 8;
  -webkit-animation-delay: 2.7333333333s;
          animation-delay: 2.7333333333s;
}
.side:nth-child(2) .ring:nth-child(23) {
  margin: 115px 0 0 -76.6666666667px;
  z-index: 7;
  -webkit-animation-delay: 2.7666666667s;
          animation-delay: 2.7666666667s;
}
.side:nth-child(2) .ring:nth-child(24) {
  margin: 120px 0 0 -80px;
  z-index: 6;
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.side:nth-child(2) .ring:nth-child(25) {
  margin: 125px 0 0 -83.3333333333px;
  z-index: 5;
  -webkit-animation-delay: 2.8333333333s;
          animation-delay: 2.8333333333s;
}
.side:nth-child(2) .ring:nth-child(26) {
  margin: 130px 0 0 -86.6666666667px;
  z-index: 4;
  -webkit-animation-delay: 2.8666666667s;
          animation-delay: 2.8666666667s;
}
.side:nth-child(2) .ring:nth-child(27) {
  margin: 135px 0 0 -90px;
  z-index: 3;
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}
.side:nth-child(2) .ring:nth-child(28) {
  margin: 140px 0 0 -93.3333333333px;
  z-index: 2;
  -webkit-animation-delay: 2.9333333333s;
          animation-delay: 2.9333333333s;
}
.side:nth-child(2) .ring:nth-child(29) {
  margin: 145px 0 0 -96.6666666667px;
  z-index: 1;
  -webkit-animation-delay: 2.9666666667s;
          animation-delay: 2.9666666667s;
}
.side:nth-child(2) .ring:nth-child(30) {
  margin: 150px 0 0 -100px;
  z-index: 0;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.side:nth-child(3) .ring:nth-child(0) {
  margin: 0px 0 0 0px;
  z-index: 0;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.side:nth-child(3) .ring:nth-child(1) {
  margin: -5px 0 0 -3.3333333333px;
  z-index: 1;
  -webkit-animation-delay: 1.0333333333s;
          animation-delay: 1.0333333333s;
}
.side:nth-child(3) .ring:nth-child(2) {
  margin: -10px 0 0 -6.6666666667px;
  z-index: 2;
  -webkit-animation-delay: 1.0666666667s;
          animation-delay: 1.0666666667s;
}
.side:nth-child(3) .ring:nth-child(3) {
  margin: -15px 0 0 -10px;
  z-index: 3;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.side:nth-child(3) .ring:nth-child(4) {
  margin: -20px 0 0 -13.3333333333px;
  z-index: 4;
  -webkit-animation-delay: 1.1333333333s;
          animation-delay: 1.1333333333s;
}
.side:nth-child(3) .ring:nth-child(5) {
  margin: -25px 0 0 -16.6666666667px;
  z-index: 5;
  -webkit-animation-delay: 1.1666666667s;
          animation-delay: 1.1666666667s;
}
.side:nth-child(3) .ring:nth-child(6) {
  margin: -30px 0 0 -20px;
  z-index: 6;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.side:nth-child(3) .ring:nth-child(7) {
  margin: -35px 0 0 -23.3333333333px;
  z-index: 7;
  -webkit-animation-delay: 1.2333333333s;
          animation-delay: 1.2333333333s;
}
.side:nth-child(3) .ring:nth-child(8) {
  margin: -40px 0 0 -26.6666666667px;
  z-index: 8;
  -webkit-animation-delay: 1.2666666667s;
          animation-delay: 1.2666666667s;
}
.side:nth-child(3) .ring:nth-child(9) {
  margin: -45px 0 0 -30px;
  z-index: 9;
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.side:nth-child(3) .ring:nth-child(10) {
  margin: -50px 0 0 -33.3333333333px;
  z-index: 10;
  -webkit-animation-delay: 1.3333333333s;
          animation-delay: 1.3333333333s;
}
.side:nth-child(3) .ring:nth-child(11) {
  margin: -55px 0 0 -36.6666666667px;
  z-index: 11;
  -webkit-animation-delay: 1.3666666667s;
          animation-delay: 1.3666666667s;
}
.side:nth-child(3) .ring:nth-child(12) {
  margin: -60px 0 0 -40px;
  z-index: 12;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.side:nth-child(3) .ring:nth-child(13) {
  margin: -65px 0 0 -43.3333333333px;
  z-index: 13;
  -webkit-animation-delay: 1.4333333333s;
          animation-delay: 1.4333333333s;
}
.side:nth-child(3) .ring:nth-child(14) {
  margin: -70px 0 0 -46.6666666667px;
  z-index: 14;
  -webkit-animation-delay: 1.4666666667s;
          animation-delay: 1.4666666667s;
}
.side:nth-child(3) .ring:nth-child(15) {
  margin: -75px 0 0 -50px;
  z-index: 15;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.side:nth-child(3) .ring:nth-child(16) {
  margin: -80px 0 0 -53.3333333333px;
  z-index: 16;
  -webkit-animation-delay: 1.5333333333s;
          animation-delay: 1.5333333333s;
}
.side:nth-child(3) .ring:nth-child(17) {
  margin: -85px 0 0 -56.6666666667px;
  z-index: 17;
  -webkit-animation-delay: 1.5666666667s;
          animation-delay: 1.5666666667s;
}
.side:nth-child(3) .ring:nth-child(18) {
  margin: -90px 0 0 -60px;
  z-index: 18;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.side:nth-child(3) .ring:nth-child(19) {
  margin: -95px 0 0 -63.3333333333px;
  z-index: 19;
  -webkit-animation-delay: 1.6333333333s;
          animation-delay: 1.6333333333s;
}
.side:nth-child(3) .ring:nth-child(20) {
  margin: -100px 0 0 -66.6666666667px;
  z-index: 20;
  -webkit-animation-delay: 1.6666666667s;
          animation-delay: 1.6666666667s;
}
.side:nth-child(3) .ring:nth-child(21) {
  margin: -105px 0 0 -70px;
  z-index: 21;
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}
.side:nth-child(3) .ring:nth-child(22) {
  margin: -110px 0 0 -73.3333333333px;
  z-index: 22;
  -webkit-animation-delay: 1.7333333333s;
          animation-delay: 1.7333333333s;
}
.side:nth-child(3) .ring:nth-child(23) {
  margin: -115px 0 0 -76.6666666667px;
  z-index: 23;
  -webkit-animation-delay: 1.7666666667s;
          animation-delay: 1.7666666667s;
}
.side:nth-child(3) .ring:nth-child(24) {
  margin: -120px 0 0 -80px;
  z-index: 24;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.side:nth-child(3) .ring:nth-child(25) {
  margin: -125px 0 0 -83.3333333333px;
  z-index: 25;
  -webkit-animation-delay: 1.8333333333s;
          animation-delay: 1.8333333333s;
}
.side:nth-child(3) .ring:nth-child(26) {
  margin: -130px 0 0 -86.6666666667px;
  z-index: 26;
  -webkit-animation-delay: 1.8666666667s;
          animation-delay: 1.8666666667s;
}
.side:nth-child(3) .ring:nth-child(27) {
  margin: -135px 0 0 -90px;
  z-index: 27;
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}
.side:nth-child(3) .ring:nth-child(28) {
  margin: -140px 0 0 -93.3333333333px;
  z-index: 28;
  -webkit-animation-delay: 1.9333333333s;
          animation-delay: 1.9333333333s;
}
.side:nth-child(3) .ring:nth-child(29) {
  margin: -145px 0 0 -96.6666666667px;
  z-index: 29;
  -webkit-animation-delay: 1.9666666667s;
          animation-delay: 1.9666666667s;
}
.side:nth-child(3) .ring:nth-child(30) {
  margin: -150px 0 0 -100px;
  z-index: 30;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes cromatic {
  0% {
    background-color: #FFFF00;
  }
  15% {
    background-color: #008F59;
  }
  30% {
    background-color: #2771B2;
  }
  45% {
    background-color: #6E3795;
  }
  60% {
    background-color: #FF0000;
  }
  75% {
    background-color: #FF9201;
  }
  100% {
    background-color: #FFFF00;
  }
}
  </style>

Tutup

Demo ini dipetik dari codepen/felipedefarias dgn sedikit perubahan CSS