CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Animation

CSS animations make it possible to animate transitions from one CSS style configuration to another.

Click the buttons below to see different animation effects:

We have the following properties to set an animation:


CSS Animation Effects

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

CSS animations are made up of two components:

  • Keyframes - define the stages and styles of the animation
  • Animation Properties - assign the @keyframes to a specific CSS element and define how it is animated

The @keyframes Rule

Before applying animations to HTML elements, you need to write animations using @Keyframes.

A @Keyframes hold what styles an element will have at certain times.

Basically, @Keyframes are each intermediate step in an animation. They are defined using percentages or from and to keywords:

In the following example we defined an animation using @Keyframes and named it "slide":

To get an animation to work, you must bind the animation to an element:

Run code

Example explained:

The animation-name property specifies the name of @keyframes that defines the property values for the animation sequence.

The animation-duration property specifies that the animation should take 4 seconds to execute from start to finish.

It is also possible to use intermediate step as percentage. By using percent, you can add as many style changes as you like:

Run code

The following example will change both the background-color and the position of the DIV element when the animation is 25% complete, 50% complete, 75% complete, and again when the animation is 100% complete:

Run code

The animation-duration property

The animation-duration property specifies the length of time that an animation should take to complete one cycle.

The animation-duration value can be defined in seconds (s) or milliseconds (ms).

Negative values are invalid, causing the declaration to be ignored.

Run code

Delay an Animation

The animation-delay property specifies when an animation should start. You can begin the animation at a future point in time, immediately and from its beginning, or immediately and partway through the animation cycle.

The animation-delay value can be defined in seconds (s) or milliseconds (ms).

The following example has a 2 seconds delay before starting the animation:

Run code

Negative values are allowed for this property. However, it will appear to have begun executing partway through its animation cycle e.g. the animation delay of -2s makes the animation start at once, but starts 2 seconds into the animation.

Run code

Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation cycle should be played before stopping.

The following example will run the animation 3 times before it stops:

Run code

The following example uses the value infinite to make the animation continue forever:

Run code

The animation-direction property

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

  • normal - The animation is played as normal (forwards). This is default
  • reverse - The animation is played in reverse direction (backwards)
  • alternate - The animation is played forwards first, then backwards
  • alternate-reverse - The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Run code

Specify the Speed Curve of the Animation

The animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle.

The animation-timing-function property can have the following values:

  • ease - Specifies an animation with a slow start, then fast, then end slowly (This is default)
  • linear - Specifies an animation with the same speed from start to end
  • ease-in - Specifies an animation with a slow start
  • ease-out - Specifies an animation with a slow end
  • ease-in-out - Specifies an animation with a slow start and end
  • cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

The following example shows the some of the different speed curves that can be used:

Run code

The animation-fill-mode property

The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

The animation-fill-mode property can have the following values:

  • none - Animation will not apply any styles to the element before or after it is executing (This is default)
  • forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
  • backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
  • both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
Run code

Animation Shorthand Property

The animation property is a shorthand property for all 8 animation properties.

Syntax:
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;
Run code

CSS Animation properties

Property Description
animation Shorthand property for setting the animation effect in one declaration
animation-name Specifies the name of the @keyframes at-rule describing the animation’s keyframes
animation-duration Defines how long time an animation should take to complete
animation-delay Specifies a delay for the start of an animation
animation-iteration-count Specifies the number of times an animation should run
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-timing-function Specify the Speed Curve of the Animation
animation-fill-mode Configures what values are applied by the animation before and after it is executing
animation-play-state Lets you pause and resume the animation sequence