Advance CSS (Animation)

Today,

we learn about Advance CSS 

So start Here we know about same 

Definition and Usage

The animation property is a shorthand property for:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

here an exp:

We Know about div tag type this command in css file and save

div {
  animation: mymove 5s infinite;} 

• Animation-Delay

The animation-delay property specifies a delay for the start of an animation.

Exp:

div {
  animation-delay: 2s;}

CSS Animation-Direction

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

Exp:

div {
  animation-direction: alternate;}

CSS Animation-Duration

The animation-duration property defines how long an animation should take to complete one cycle.

Exp:

div {
  animation-duration: 3s;}

CSS Animation-Fill-Mode

The animation-fill-mode property specifies a style for the element when the animation is not playing

Exp:

div {
  animation-fill-mode: forwards;}

CSS Animation-Iteration-Count

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

Exp:

div {
  animation-iteration-count: 2;}

CSS Animation-Name

The animation-name property specifies a name for the @keyframes animation.

Exp:

div {
  animation-name: mymove;}

CSS Animation-Play-State

The animation-play-state property specifies whether the animation is running or paused.

Exp:

div {
  animation-play-state: paused;}

CSS Animation-Timing-Function

The animation-timing-function specifies the speed curve of an animation.

Exp:

div {
  animation-timing-function: linear;}