Live
x
<html> <head> <title>Animacje</title> <style> body { background-color: skyblue; font-family: sans-serif; padding-top: 20px; } img { display: block; width: 100px; } .bee-1 { animation: fly 4s infinite linear; } @keyframes fly { 0% { transform: translate(0px, 0px); } 40% { transform: translate(200px, 100px); } 80% { transform: translate(400px, 0); } 100% { transform: translate(600px, 0); } } </style> </head> <body> <div class="wrapper"> <img class="bee-1" src="https://pngimg.com/uploads/bee/bee_PNG74720.png" alt="bee" /> </div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.