Live
x
<html> <head> <title>Animacje</title> <style> body { background-color: skyblue; font-family: sans-serif; padding-top: 20px; } img { display: block; width: 100px; animation-name: fly; animation-duration: 2s; animation-iteration-count: infinite; } /* Animacja wykonana w kolejności to -> from */ .bee-1 { animation-direction: reverse; } /* Animacja wykonywana w kolejności from -> to -> from -> ... */ .bee-2 { animation-direction: alternate; } /* Animacja wykonywana w kolejności to -> from -> to -> ... */ .bee-3 { animation-direction: alternate-reverse; } @keyframes fly { from { transform: translateX(0px); } to { transform: translateX(600px); } } </style> </head> <body> <div class="wrapper"> <img class="bee-1" src="https://pngimg.com/uploads/bee/bee_PNG74720.png" alt="bee" /> <img class="bee-2" src="https://pngimg.com/uploads/bee/bee_PNG74721.png" alt="bee" /> <img class="bee-3" src="https://pngimg.com/uploads/bee/bee_PNG74728.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.