@keyframes body { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } body { animation-name: body; animation-duration: 2s; animation-iteration-count: infinite; text-align: center; } #cytat { color: white; background-color: #303030; width: 30vw; height:80vh; text-align: center; margin: auto; border-radius: 60px; opacity: 0.8; animation-name: spin; animation-duration: 0.5s; animation-iteration-count: 1; } #text { margin: 5px; margin-top: 60px;; }