body { background-color: #fff; margin: 0; padding: 0; overflow: hidden; } .bee-container { position: absolute; top: 40%; left: 40%; } .bee { width: 150px; animation: buzz 4s infinite ease-in-out; } @keyframes buzz { 0% { transform: translate(0px, 0px) rotate(0deg); } 10% { transform: translate(5px, -5px) rotate(3deg); } 20% { transform: translate(-10px, 5px) rotate(-3deg); } 30% { transform: translate(10px, 10px) rotate(5deg); } 40% { transform: translate(-5px, -10px) rotate(-5deg); } 50% { transform: translate(0px, 5px) rotate(2deg); } 60% { transform: translate(-5px, -5px) rotate(-2deg); } 70% { transform: translate(5px, 10px) rotate(3deg); } 80% { transform: translate(-10px, 0px) rotate(-3deg); } 90% { transform: translate(5px, -5px) rotate(1deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } }body { background-color: #fff; margin: 0; padding: 0; overflow: hidden; } .bee-container { position: absolute; top: 40%; left: 40%; } .bee { width: 150px; animation: buzz 4s infinite ease-in-out; } @keyframes buzz { 0% { transform: translate(0px, 0px) rotate(0deg); } 10% { transform: translate(5px, -5px) rotate(3deg); } 20% { transform: translate(-10px, 5px) rotate(-3deg); } 30% { transform: translate(10px, 10px) rotate(5deg); } 40% { transform: translate(-5px, -10px) rotate(-5deg); } 50% { transform: translate(0px, 5px) rotate(2deg); } 60% { transform: translate(-5px, -5px) rotate(-2deg); } 70% { transform: translate(5px, 10px) rotate(3deg); } 80% { transform: translate(-10px, 0px) rotate(-3deg); } 90% { transform: translate(5px, -5px) rotate(1deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } }portfoliobody { background-color: #fff; margin: 0; padding: 0; overflow: hidden; } .bee-container { position: absolute; top: 40%; left: 40%; } .bee { width: 150px; animation: buzz 4s infinite ease-in-out; } @keyframes buzz { 0% { transform: translate(0px, 0px) rotate(0deg); } 10% { transform: translate(5px, -5px) rotate(3deg); } 20% { transform: translate(-10px, 5px) rotate(-3deg); } 30% { transform: translate(10px, 10px) rotate(5deg); } 40% { transform: translate(-5px, -10px) rotate(-5deg); } 50% { transform: translate(0px, 5px) rotate(2deg); } 60% { transform: translate(-5px, -5px) rotate(-2deg); } 70% { transform: translate(5px, 10px) rotate(3deg); } 80% { transform: translate(-10px, 0px) rotate(-3deg); } 90% { transform: translate(5px, -5px) rotate(1deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } }body { background-color: #fff; margin: 0; padding: 0; overflow: hidden; } .bee-container { position: absolute; top: 40%; left: 40%; } .bee { width: 150px; animation: buzz 4s infinite ease-in-out; } @keyframes buzz { 0% { transform: translate(0px, 0px) rotate(0deg); } 10% { transform: translate(5px, -5px) rotate(3deg); } 20% { transform: translate(-10px, 5px) rotate(-3deg); } 30% { transform: translate(10px, 10px) rotate(5deg); } 40% { transform: translate(-5px, -10px) rotate(-5deg); } 50% { transform: translate(0px, 5px) rotate(2deg); } 60% { transform: translate(-5px, -5px) rotate(-2deg); } 70% { transform: translate(5px, 10px) rotate(3deg); } 80% { transform: translate(-10px, 0px) rotate(-3deg); } 90% { transform: translate(5px, -5px) rotate(1deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } }
body { background-color: #fff; margin: 0; padding: 0; overflow: hidden; } .bee-container { position: absolute; top: 40%; left: 40%; } .bee { width: 150px; animation: buzz 4s infinite ease-in-out; } @keyframes buzz { 0% { transform: translate(0px, 0px) rotate(0deg); } 10% { transform: translate(5px, -5px) rotate(3deg); } 20% { transform: translate(-10px, 5px) rotate(-3deg); } 30% { transform: translate(10px, 10px) rotate(5deg); } 40% { transform: translate(-5px, -10px) rotate(-5deg); } 50% { transform: translate(0px, 5px) rotate(2deg); } 60% { transform: translate(-5px, -5px) rotate(-2deg); } 70% { transform: translate(5px, 10px) rotate(3deg); } 80% { transform: translate(-10px, 0px) rotate(-3deg); } 90% { transform: translate(5px, -5px) rotate(1deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } }body { background-color: #fff; margin: 0; padding: 0; overflow: hidden; } .bee-container { position: absolute; top: 40%; left: 40%; } .bee { width: 150px; animation: buzz 4s infinite ease-in-out; } @keyframes buzz { 0% { transform: translate(0px, 0px) rotate(0deg); } 10% { transform: translate(5px, -5px) rotate(3deg); } 20% { transform: translate(-10px, 5px) rotate(-3deg); } 30% { transform: translate(10px, 10px) rotate(5deg); } 40% { transform: translate(-5px, -10px) rotate(-5deg); } 50% { transform: translate(0px, 5px) rotate(2deg); } 60% { transform: translate(-5px, -5px) rotate(-2deg); } 70% { transform: translate(5px, 10px) rotate(3deg); } 80% { transform: translate(-10px, 0px) rotate(-3deg); } 90% { transform: translate(5px, -5px) rotate(1deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } }