Hit enter after type your search item

Create CSS animation for images by using “animation” property: 2 demos

The animation property of CSS 3

The CSS 3 animation property is used to create animations for different web elements including images. For that, you may use the shorthand animation property or specify different animation related properties separately.

The shorthand of animation property can be used as follows:

  • The first value sets the name of animation i.e. aniname in above example.
  • The second value is for the duration of the animation which is set 0.9 seconds.
  • The third value, ease-in-out is for the speed for the curve. You may use other values like linear, ease, ease-in, ease-out etc.
  • The next value specifies the delay in the start of the animation, which is kept 0.3 seconds.
  • The value 4 sets the count for iteration of that animation. There, you may set how many times an animation should loop through.
  • The reverse is the value for animation-direction property. The other supported values are normal, alternate and alternate-reverse.
  • The next is animation-fill-mode, which is set forward in above syntax. The other supported values are backwards, both, and none.

See the following demos of applying the animation CSS property in different HTML elements.

A demo of image animation with flip transition

In this demo, two images are used for the flip transition by using the animation property of CSS 3. As the web page loads, the second image will display in place of the first image with an animation. In the animation property, 0.5s is the value set for the start of the animation.

The speed of the curve is ease-in, along with other properties. Have a look at the live demo and complete code of CSS and markup:

CSS animation

See online demo and code

In the code, you can see a lot of div elements are used for different parts of the images. The div properties are set by using the nth-child in the CSS part. There, animation property is used with different values.

The CSS:


The markup:


See the complete code and live output in the demo page.

A demo with different animation curve and other values

In this demo, I used the same images as in above example with different values for animation.

This time, the linear value is used for the curve while the animation direction is alternate.

The animation starts in 0.5s while the first picture is visible for a while before animation starts and second image displays with a flip transition. The animation direction is forwards. Have a look:

CSS animation flip

See online demo and code

You see, the first image specified in the img-ripple-transition class background property displayed first unlike in the above example.


Credit: baileyparker

This div height required for enabling the sticky sidebar