Hello!
Does anyone know if it is possible to move an image (motion animation) in different directions using CSS?
There is a website (link removed), where some elements (airplane and others) perform smooth vertical oscillations.
Is it possible to do this horizontal and diagonal movement using CSS?
Thank you
1 Like
Yes you can move an element using css in any direction you wish.
What have you tried so far?
1 Like
Hi there! 
Yes, it’s definitely possible to move elements horizontally, vertically, and even diagonally using pure CSS! You can achieve this with CSS animations and keyframes. Here’s a basic example for moving an image in multiple directions:
@keyframes move {
0% { transform: translate(0, 0); }
25% { transform: translate(100px, 0); } /* Move horizontally /
50% { transform: translate(100px, 100px); } / Move diagonally /
75% { transform: translate(0, 100px); } / Move vertically /
100% { transform: translate(0, 0); } / Back to start */
}
img {
animation: move 5s infinite ease-in-out;
}
This will move an image in a square pattern. You can adjust the percentages and `translate()` values to create any custom path, including diagonal movements.
For smooth oscillations like the airplane effect you mentioned, using **CSS `cubic-bezier()` timing functions** or adjusting `ease-in-out` can give smoother motions.