Live
x
<html> <head> <title>Animacje</title> <style> body { background-color: skyblue; font-family: sans-serif; padding-top: 10px; } img { display: block; width: 100px; animation-name: fly; animation-duration: 4s; } /* Zwróc uwagę, że animacja zacznie się po dwóch sekundach i wtedy element "przeskoczy" na miejsce opisane w bloku "from" i dopiero zacznie animację. */ .bee-1 { animation-delay: 2s; } /* Możemy temu zapobiec i zaaplikować style z bloku "from" jeszcze przed rozpoczęciem animacji. */ .bee-2 { animation-delay: 2s; animation-fill-mode: backwards; } /* Zatrzymanie elementu na końcu animacji. */ .bee-3 { animation-fill-mode: forwards; } /* Połączenie dwóch poznanych wcześniej opcji. */ .bee-4 { animation-delay: 2s; animation-fill-mode: both; } @keyframes fly { /* Ustalamy stan początkowy animacji na inny niż położenie elementu bez animacji. */ from { transform: translateX(200px); } 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"> <img class="bee-4" src="https://pngimg.com/uploads/bee/bee_PNG74716.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.