* { box-sizing: border-box; } body { background-image: -webkit-radial-gradient(#fff 25%, #bbb 75%); background-image: radial-gradient(#fff 25%, #bbb 75%); height: 100vh; width: 100vw; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .box { height: 50vh; width: 50vh; } [class^='c'] { background-color: #0ff; border-radius: 50%; height: 50vh; width: 50vh; mix-blend-mode: multiply; position: absolute; } .circle1 { background-color: rgba(0,255,255,0.5); -webkit-animation: c1 2.5s ease-in-out infinite alternate; animation: c1 2.5s ease-in-out infinite alternate; } .circle2 { background-color: rgba(255,255,0,0.5); -webkit-animation: c2 2.5s ease-in-out infinite alternate; animation: c2 2.5s ease-in-out infinite alternate; } .circle3 { background-color: rgba(255,0,255,0.5); -webkit-animation: c3 2.5s ease-in-out infinite alternate; animation: c3 2.5s ease-in-out infinite alternate; } .circle4 { background-color: rgba(255,165,0,0.5); -webkit-animation: c4 2.5s ease-in-out infinite alternate; animation: c4 2.5s ease-in-out infinite alternate; } .circle5 { background-color: rgba(0,0,255,0.5); -webkit-animation: c5 2.5s ease-in-out infinite alternate; animation: c5 2.5s ease-in-out infinite alternate; } @-webkit-keyframes c1 { from { -webkit-transform: translate(-25%, 25%); transform: translate(-25%, 25%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes c1 { from { -webkit-transform: translate(-25%, 25%); transform: translate(-25%, 25%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes c2 { from { -webkit-transform: translate(-25%, -25%); transform: translate(-25%, -25%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes c2 { from { -webkit-transform: translate(-25%, -25%); transform: translate(-25%, -25%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes c3 { from { -webkit-transform: translate(25%, 25%); transform: translate(25%, 25%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes c3 { from { -webkit-transform: translate(25%, 25%); transform: translate(25%, 25%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes c4 { from { -webkit-transform: translate(0, 0); transform: translate(0, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes c4 { from { -webkit-transform: translate(0, 0); transform: translate(0, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes c5 { from { -webkit-transform: translate(25%, -25%); transform: translate(25%, -25%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes c5 { from { -webkit-transform: translate(25%, -25%); transform: translate(25%, -25%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
