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 wykonywana cały czas z tą samą prędkością. */ .bee-1 { animation-timing-function: linear; } /* Animacja zwalnia pod koniec wykonywania. */ .bee-2 { animation-timing-function: ease-out; } /* Wykorzystanie funkcji "cubic-bezier" */ .bee-3 { animation-timing-function: cubic-bezier(0.12, 1.56, 0.55, -0.68); } @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.