CSS @keyframes rule

The CSS @keyframe specifies the animation rule that defines the CSS properties for the elements at each state with a timeline.

We can create complex animation properties by using the @keyframe. An animation is created with the changeable CSS styles that can be repeated indefinitely or a finite number of times. A simple animation can just have two keyframes, while the complex animation has several keyframes.

Syntax

To use keyframes, we need to create a @keyframes rule along with the animation-name property for matching an animation with its keyframe declaration.

It accepts three values. Let's discuss each of them in detail.

Property values

animation-name: It is the required value that defines the name of the animation.

keyframes-selector: It specifies the percentage along with the animation when the keyframe occurs. Its value lies between 0% to 100%, from (same as 0%), to (same as 100%). Keyframe percentages can be written in any order because they will be handled in the order they occur.

css-styles: It defines one or more than one CSS style properties.

If the keyframe rule does not define the start and end states of animation, then the browsers will use the existing styles of the element. The properties get ignored that cannot be animated in keyframe rules.

Keyframes timing function

For controlling the animation rate, we can use the following values.

linear: It means that the transition rate will be constant from start to end.

ease: It means that the animation starts slowly, and then after a time period, the speed increases, and before end speed will again slow down.

ease-in: It is similar to ease, but the animation ends quickly.

ease-out: It is also similar to ease, but the animation starts fast.

Let us try to understand CSS @keyframe rule with some illustrations.

Example

Test it Now

Example2

Test it Now

Points to remember

Some of the important points about this rule are given as follows:

  • We can use from keyword instead of using 0%.
  • We can use to keyword instead of using 100%.
  • Even if we are using from and to keywords, any values between them will still be declared in %.
  • For the valid animation, the starting and ending time must be declared.
  • Those declarations get ignored that involves the !important

Next TopicCSS pseudo-classes




Contact US

Email:[email protected]

CSS @keyframes rule
10/30