Moving an object horizontally and vertically using pure CSS

HTML & CSS
1

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
2

Yes you can move an element using css in any direction you wish.


What have you tried so far?

1 Like
3

Hi there! :wave:

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.
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.