In CSS, we can try out simple animation like moving an object on either x-axis, y-axis or both by using the property ' -webkit-transition'.You can hover over the car in the following output, to view the animation in Google chrome browsers.

Steps followed for the above animation are given below.

1. Give a background div for the image. Here it was taken as the road.

The code for which is given :

The height and width parameters of the above div would depend on the image size.

2. Assign a div for the placement of image

The position values are assigned as absolute. We can vary the left and bottom margins in accordance to the background.

3. Assign a style to the image

The above code will cause the animation to last for 2 seconds

4 Give hover effect to the image

The HTML code for the above style was given as:

Hope you enjoyed the tutorial and will try out different animations using CSS.

Tags: Animation in CSS3, style for animation, style for motion, moving objects in CSS3, moving objects in x and y axis, -webkit-transition, webkit transition tutorial.