body{ margin: 0; padding: 0; background: #e74c3c; } .middle{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .mouse{ width: 100px; height: 180px; border: 4px solid #333; border-radius: 60px; } .mouse::before{ content: ""; width: 25px; height: 25px; position: absolute; top: 30px; background: #333; left: 50%; transform: translateX(-50%); border-radius: 50%; opacity: 1; animation: mouse 2s infinite; } @keyframes mouse { from{ opacity: 1; top: 30px; } to{ opacity: 0; top: 150px; } }