#triangle {
 height: 100px;
 width: 100px; 
 background-color: gray;
 position:  relative;
 animation-name: Brian;
 animation-duration: 10s; 
 animation-iteration-count: 1; 
} 
   
    
  
@keyframes Brian { 
  0% {
    left: 0px;
    top: 0px;
    background-color: gray;
    transform: rotate(0deg);
}
     
  25% {
    left: 500px;
    top:  0px;
    background-color: brown;
    transform: rotate(360deg);
}
    
  50% {
    left:500px;
    top: 500px;
    background-color: green;
    transform: rotate(40deg);
}
  
  75% {
    left: 0px;
    top:  500px;
    background-color: blue;
    transform: rotate(360deg);
}    
      
  100% {
    left: 0px;
    top:  0px;
    background-color: gray;
    transform: rotate(360deg);
}