CSS Animation Properties

VIDYA ACADEMY

VIDYA ACADEMY Add- Rail Bazar Gurudwara Gali Fatehpur Mo- 8400499579

• Home
• Libre Office Calc
  • File Menu
  • Edit Menu
  • View Menu
  • Insert Menu
  • Format Menu
  • Style Menu
  • Sheet Menu
  • Data Menu
  • Tools Menu
  • Libre office Calc Formulas
  • Calc Shortcut Keys
• Mock Test
  • Mock Test-1
  • Mock Test-2
  • Mock Test-3
  • Mock Test-4
  • Mock Test-5
  • Mock Test-6
• CSS
  • What is css
  • Types of CSS
  • CSS Selectors
  • CSS Animation Properties
  • CSS Position Properties
• Courses
  • Java Script
  • Libre office Scalc
  • Libre office writer
  • Libre Office impress
  • Tally Accounting
  • Internet
  • HTML Tags

-:-CSS ANIMATION PROPERTIES-:-

Animation Properties :-

The animation property is a shorthand property for -

1. Animation-Name
2. Animation-Duration
3. Animation-Timing-Function
4. Animation-Delay
5. Animation-Iteration-Count
6. Animation-Direction
7. Animation-Fill-Mode
8. Animation-Play-State

1. Animation-Name :-

The animation-name property specifies a name for the @key frames animation.

Value - Keyframename, None ( by default )



2. Animation-Duration :-

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

Value - None ( by default )




Time :- Specifies the legth of time an animaton should take to complete one cycle. This can be spacifiesd
in seconds or miliseconds default value is '0' which means that no animation will occur.

3. Animation-Timing-Function :-

The animation-timing-function specified the speed curve of an animation.
The speed curve define the time an animation uses to change from one set of css styles to another.

Value

Liener :- The animation has the same speed from start to end.

Ease :-Default value. The animation has a slow start,then fast,before it end.

Ease-in :-The animation has a slow start.

Ease-out :-The animation has a slow end.

Ease-in-out :-The animation has both a slow start and a slow end.



4. Animation-Delay :-

The animation-delay property specifies a delay for the start of an animation.
The animation-delay value is defiened in second (s) or milisecond (ms) .

Value - OS,Time



5. Animation-Iteration-count :-

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

Value

Number :-A number that defines how many times an animation should be played default value is 1.

Infinite :-Spacifies that the animation should be played infinite times ( for ever )

6. Animation-Direction :-

The animation-direction property defines whether an animation should be played forword, backwords or in cycle.

Value

Normal :-Default value.The animation is played as normal ( forwords ).

Reverce :-The animation is played in reverce direction ( backwords ).

Alternate :-The animation is played forword firstTHENbackword.

Alternate-Reverce :-The animation is played Backword firstthen Forword.



7. Animation-Fill-Mode :-

The animation-Fill-Mode property specified a style for the element when the animation is not playing ( Before it starts, after it ends,or both ).
CSS animation do not effect the element before the first keyframe is played or after the last keyframe is played. The animaton-fill-mode
property can override this behavior.

Value

None :-Default value. Animation will not apply any styles to the element before or after it is executing.

Forword :-The element will retain the styles values that is set bythe last keyframe ( depends on animation-direction and animation iteration-count ).

Backword :-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 forwords and backwords, extending the animation properties in both directions.



8. Animation-Paly-State :-

The animation-Play-State property specifies whether the animation is runing or paused.

Note:-Use this property in a javascript to pause an animation in the middle of a cycle.

Value

Paused :-Specifies that the animation is paused.

runing :-Default value. Specifies that the animation is runinhg.

All animation properties :-


click here

Blinker animation properties :-


click here