demo-container { display: inline-block; border: 2px solid rgb(189, 189, 189); padding: 25px 10px 10px; border-radius: 4px; width: 230px; height: 230px; background: rgb(224, 242, 255); text-align: center; }
demo-object { display: block; position: relative; width: 20px; height: 50px; border-radius: 10px; margin: 20px 0px; transform: translateX(30px) rotate(45deg); animation: 5s linear 0s infinite normal none running slide; background: rgb(0, 0, 255); }
demo-object:hover { animation-play-state: paused; }
.element {animation-composition: add;}
@keyframes slide { 
  20%, 40% { transform: translateX(100px); background: rgb(0, 255, 0); }
  80%, 100% { transform: translateX(150px); background: rgb(255, 0, 0); }
}