.thing { position:fixed; top: 50%; left: 50%; margin-top:-75px; margin-left:-75px; width:150px; height:150px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation: rotateit 1.5s ease infinite; animation: rotateit 1.5s ease infinite; } .beam { width:50px; height:50px; border-radius:10px; position:absolute; } .r { background-color:#e74c3c; } .b { background-color:#3498db; } .r1 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); left:50px; top:0px; -webkit-animation: move1r 1.5s ease infinite; animation: move1r 1.5s ease infinite; } .r3 { top:50px; -webkit-animation: move2 1.5s ease infinite; animation: move2 1.5s ease infinite; } .b1 { -webkit-transform: rotate(90deg); left:50px; top:100px; -webkit-animation: move1b 1.5s ease infinite; animation: move1b 1.5s ease infinite; } .b3 { top:50px; left:100px; -webkit-animation: move2 1.5s ease infinite; animation: move2 1.5s ease infinite; } @-webkit-keyframes rotateit { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 95% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 99% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes rotateit { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 95% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 99% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @-webkit-keyframes move1r { 0% { top:0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { top:100px; } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 95% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 99% { top:100px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } } @keyframes move1r { 0% { top:0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { top:100px; } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 95% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 99% { top:100px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } } @-webkit-keyframes move2 { 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 95% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 99% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } } @keyframes move2 { 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 95% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 99% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } } @-webkit-keyframes move1b { 0% { top:100px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { top:0px; } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 95% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 99% { top:0px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } } @keyframes move1b { 0% { top:100px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { top:0px; } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 95% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 99% { top:0px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } }