.camera { position: fixed; right: 0px; top: 50px; width: 70px; z-index: 1000; pointer-events: none; .redLight { animation: redLight 1s ease infinite; } .glare { transform-origin: 80% 80%; transform-box: fill-box; animation: glare 4s linear infinite; } .outerRing { transform-origin: 50% 50%; transform-box: fill-box; animation: outerRing 4s linear infinite; } } @keyframes redLight { 0% { fill-opacity: 1; } 50% { fill-opacity: .3; } 100% { fill-opacity: 1; } } @keyframes glare { 0% { transform: rotate(0deg); opacity: 1; } 20% { transform: rotate(90deg); opacity: .4; } 50% { transform: rotate(-50deg); opacity: 1; } 100% { transform: rotate(0deg); } } @keyframes outerRing { 0% { transform: scale(1); } 20% { transform: scale(.8); } 50% { transform: scale(.9); } 100% { transform: scale(1); } }