CSS Animation: The animation property of CSS is applied to make animation over any webpage. It is used as the animation replacement made by JavaScript and Flash.

Rules of CSS3 @keyframes

The animation can be made inside the rule of @keyframe. It can be used to handle various intermediate steps within the sequence of CSS animation.

Working of Animation

An animation enables a component change gradually through a single style to other styles. We can include the properties as much as we wish to include. Also, we can describe the modifications in percentage. 100 percent describes the animation completion, and 0 percent represents the animation start.

How it works

If animation is made within the rule of @keyframe, then it should be restrained with the selector. Otherwise, that animation will not have any effect.

An animation is restrained to a selector by describing at least the following two properties:

  1. The animation name
  2. The animation duration

Properties of Animation

PropertyDescription
@keyframesThis property is applied to describe the animation.
AnimationIt is the shorthand attribute, applied to set every property, excluding the animation-fill-mode and the animation-play-state attributes.
animation-delayThis property describes at the time of the start of an animation.
animation-directionThis property describes whether or not an animation must play inside alternate or reserve cycle.
animation-durationThis attribute describes the duration of time taken via animation for completing one cycle.
animation-fill-modeThis attribute depicts the component’s static style. (If an animation isn’t playing.)
animation-iteration-countThis attribute represents the time’s number; an animation must be played.
animation-play-stateThis property depicts when an animation is paused o running.
animation-nameThis property describes the @keyframes animation name.
animation-timing-functionThis attribute depicts the animation’s speed curve.

Consider the following examples.

  1. Example: background-color changing

Let’s take a simple animation illustration that modifies the rectangle’s background color from LIME to GREEN.

Output:

CSS Animation
  • Example: Rectangle moving

Let’s take other illustrations to show animation along with the percentage value.

Output:

CSS Animation

Pin It on Pinterest

Share This