Scribd
Upload
80 views

Animation: I Am Vishal Kumar Tiwari - Web Designer (Trainee) Hi

CSS animation allows controlling element motion and display changes through CSS properties and keyframes. Keyframes indicate animation properties and time intervals, while properties configure aspects like delay, direction, duration, fill mode, iteration count, name, play state, and timing function. CSS animation was introduced in 2009 and proposed as part of CSS3 to provide rudimentary animations beyond the :hover pseudo-class.

Uploaded by

Vishalkumartiwari …
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
80 views

Animation: I Am Vishal Kumar Tiwari - Web Designer (Trainee) Hi

CSS animation allows controlling element motion and display changes through CSS properties and keyframes. Keyframes indicate animation properties and time intervals, while properties configure aspects like delay, direction, duration, fill mode, iteration count, name, play state, and timing function. CSS animation was introduced in 2009 and proposed as part of CSS3 to provide rudimentary animations beyond the :hover pseudo-class.

Uploaded by

Vishalkumartiwari …
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

CSS animAtion

Hi
I AM VISHAL KUMAR TIWARI
-Web designer (trainee)
Lets start with history :
While the pseudo-class :hover has been used to generate rudimentary
animations for years, extensions of CSS into the realm of animation were
minimal until the late 2000s decade

 WebKit had announced its intent to include CSS animation, transitions,


and transforms as features of WebKit.

It also announced the implementation of both implicit and explicit


animation through CSS in February 2009.

CSS animation has also been put forth as a feature of CSS3, the ongoing
draft specification managed by the World Wide Web Consortium (W3C).
Animation :-
 It is used to control the elements by changing their motions or
display.

 It has two parts, one which contains the CSS properties which
describes the animation of the elements

 other contains certain keyframes which indicate the animation


properties of the element and the specific time intervals at
which those have to occur.
animation-delay :-
The animation-delay property specifies a
delay for the start of an animation.

The animation-delay value is defined in seconds (s) or


millisecond (ms)

Time :- Optional . If use negative values , the animation


will start as if it had already been playing for N
second/milliseconds

Initial :- Sets this property to its default value.

Inherit :- Inherit this property from its parent element.


animation-direction :-
Property defines whether the animation should be played forwards , backword or
in alternate cycle

Normal : Default value The animation played as anormal (forwards)

reverse : The animation played in reverse direction (backwords)

alternate : The animation played forwards first then backwords

Alternate-reverse : The animation played backwords first , then


forwards

Initial and Inherit : initial sets it to default and inherit , inherit the
property from the parents
animation-duration :-
The animation-duration define how long animation should
take to complete on cycle

Time:- Specify the length of the time a animation should


take to complete one cycle . This can be specify in second
and millisecond the default value is 0

Initial :- Sets this property to its default value.

Inherit :- Inherit this property from its parent element.


animation-fill-mode :-
The animation-fill-mode property specify the style of element
when animation is not playing(before it start after it end both)

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

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

Initial :- Sets this property to its default value.

Inherit :- Inherit this property from its parent element.


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

Number:- A number that defines how many times an animation


should be played. Default value is

Infinite:- Specifies that the animation should be played infinite


times (for ever)

Initial :- Sets this property to its default value.

Inherit :- Inherit this property from its parent element.


animation-name :-
The animation-name property specifies a name for
the @keyframe animation.
Keyframename:- Specifies the name of the keyframe you want to
bind to the selector

none:- Default value. Specifies that there will be no animation (can be


used to override animations coming from the cascade)

initial:- Sets this property to its default value

inherit:- Inherits this property from its parent


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

Paused: Specifies that the animation is paused


-
Running:- Default value. Specifies that the animation is running

Initial:- Sets this property to its default value.

Inherit:- Inherits this property from its parent element.


animation-timing-function :-
The animation-timing-function specifies the speed curve of an animation. The
speed curve defines the TIME an animation uses to change from one set of
CSS styles to another . The speed curve is used to make the changes
smoothly.
linear :- The animation has the same speed from start to end

ease:- Default value. The animation has a slow start, then fast, before it
ends slowly
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

step-start :- Equivalent to steps(1, start)

step-end :- Equivalent to steps(1, end)


keyframe:-
The @keyframes rule specifies the animation code . The animation is created by
gradually changing from one set of CSS styles to another . During the
animation, you can change the set of CSS styles many times.

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

You might also like