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;}
}
