@keyframes animate-triangle1 {
    from {top: 180px;}
    to {top:0px;}
}

@keyframes animate-triangle2 {
    from {left: 180px;}
    to {left:0px;}
}

@keyframes animate-rectangle {
    from {top: -200px;
        left: 180px;}
    to {top: 0px;
      left: 0px;}
}

@keyframes bbc {
    from {background-color: #0A7E8C; }
    to {background-color: black;}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes strobe {
    from {background-color: black; }
    to {background-color: white;}
}

body {
  animation-name: bbc;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}


#circle {
  position:absolute;
  width: 300px;
  height: 300px;
  border-radius: 100px;
  margin: auto;
  margin-top: auto;
  background: #e67e22;

  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#frame {
  position:relative;
  width: 300px;
  height: 300px;
  border-radius: 100px;
  margin: auto;
  margin-top: 100px;
}

#triangle1 {
  position: absolute;;
  width: 0;
  height: 0;
  margin: auto;

  border-top: 70px solid transparent;
  border-left: 140px solid #c0392b;
  border-bottom: 70px solid transparent;
  animation-name: animate-triangle1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

#triangle2 {
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
  margin-top: 200px;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 160px solid #27ae60;
  animation-name: animate-triangle2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;

}

#rectangle {
  position: absolute;
	width: 20px;
	height: 100px;
  transform: rotate(45deg);
  margin: auto;
  margin-top: 200px;
	background: #8e44ad;
  animation-name: spin;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-duration: 1s;

}

#square {
  position: absolute;
	width: 50px;
	height: 50px;
  top: 100;
  right:20;
	background: #8e44ad;
  animation-name: strobe;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-duration: .01s;
}