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; } /* Animacja wykonana trzykrotnie */ .bee-1 { animation-iteration-count: 3; } /* Możemy sprawić wrażenie, że obiekt "porusza" się wokół ekranu umieszczając jego początkową i końcową pozycję poza ekranem */ .bee-2 { animation-name: fly-around; animation-iteration-count: 3; } /* Powtarzanie animacji w nieskończoność. */ .bee-3 { animation-name: fly-around; animation-iteration-count: infinite; } @keyframes fly { from { transform: translateX(0px); } to { transform: translateX(600px); } } @keyframes fly-around { /* Zaczynamy i kończymy animację poza widocznym obszarem ekranu. */ from { transform: translateX(-150px); } to { transform: translateX(900px); } } </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.