Live
x
<html> <head> <title>Animacje</title> <style> body { background-color: skyblue; font-family: sans-serif; padding-top: 20px; } img { display: block; width: 100px; /* Animacja będzie używała właściwości "top", więc element musi posiadać ustawioną właściwość "position". */ position: relative; } .bee-1 { /* Połączenie dwóch animacji. Możemy łączyć wiele animacji. */ animation: fly 4s linear, jump 0.5s 2s; } @keyframes fly { 0% { transform: translateX(0px); } 100% { transform: translateX(600px); } } @keyframes jump { 0% { top: 0px; } 40% { top: 50px; } 60% { top: -50px; } 100% { top: 0px; } } </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.