Live
x
<html> <head> <title>Animacje</title> <style> body { background-color: skyblue; font-family: sans-serif; padding-top: 50px; } img { width: 100px; /* Podajemy nazwę keyframe-a */ animation-name: fly; /* Podajemy długość trwania animacji, czyli czas zmiany wartości w keyframe-ie z bloku "from" do bloku "to" */ animation-duration: 4s; } /* Definicja animacji - po słowie @keyframes musimy podać jej nazwę. */ @keyframes fly { /* Stan początkowy animacji */ from { transform: translateX(0); } /* Stan końcowy animacji */ to { transform: translateX(600px); } } </style> </head> <body> <div class="wrapper"> <img 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.