:doodle { position: absolute; left: 50%; transform: translateX(calc(-50% - 3px)) translateY(0px); @grid: 5 / 500px; } :after { content: +; font-size: 60px; font-weight: 900; color: #8b8b8a; } @keyframes rotating { 0% { transform: rotate(0deg); } 20% { transform: rotate(-90deg); } 100% { transform: rotate(-90deg); } } animation: rotating 4s linear infinite; :doodle { position: absolute; left: 50%; transform: translateX(calc(-50% - 3px)) translateY(50px); @grid: 5 / 500px; } :after { content: +; font-size: 60px; font-weight: 900; color: #d2d2d2; } @keyframes rotating { 0% { transform: rotate(0deg); } 20% { transform: rotate(-90deg); } 100% { transform: rotate(-90deg); } } animation: rotating 4s linear infinite; :doodle { position: absolute; left: 50%; transform: translateX(calc(-50% + 47px)) translateY(-50px); @grid: 5 / 500px; } :after { content: +; font-size: 60px; font-weight: 900; color: #8b8b8a; } @keyframes rotating { 0% { transform: rotate(0deg); } 20% { transform: rotate(-90deg); } 100% { transform: rotate(-90deg); } } animation: rotating 4s linear infinite; :doodle { position: absolute; left: 50%; transform: translateX(calc(-50% + 47px)) translateY(0px); @grid: 5 / 500px; } :after { content: +; font-size: 60px; font-weight: 900; color: #d2d2d2; } @keyframes rotating { 0% { transform: rotate(0deg); } 20% { transform: rotate(-90deg); } 100% { transform: rotate(-90deg); } } animation: rotating 4s linear infinite;