CSS3 Animated Notes

------------------------------------------------------------------------------------
@keyframes
Animation The shorthand properties of all animated properties, except for the Animation-play-state property.
ANIMATION-NAME Specifies the name of the @keyframes animation.
Animation-duration specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.
animation-timing-function Specifies the speed curve of the animation. The default is "ease".
Animation-delay Specifies when the animation starts. The default is 0.
ANIMATION-ITERATION-COUNT specifies the number of times the animation is played. The default is 1.
Animation-direction Specifies whether the animation will play backwards in the next cycle. The default is "normal".
ANIMATION-PLAY-STATE Specifies whether the animation is running or paused. The default is "running".
ANIMATION-FILL-MODE specifies the state outside the animation time of the object. */

Key words:
Keyframes: keyframes
Animation: Animation
Duration: Duration
Timing-function: Timed Activity/Speed curve
Iteration-count Repeat Count/repeat play
Direction reverse Playback
Play-state Playback Status
Fill-mode fill mode/After end animation is visible
------------------------------------------------------------------------------------
@keyframes//
Syntax: @keyframes animationname {keyframes-selector {css-styles;}}
Animationname required. Defines the name of the animation.
Keyframes-selector required. The percentage of the animation duration.
Valid values:
0-100%
From (same as 0%)
To (same as 100%)
Css-styles required. One or more valid CSS style attributes.

EXP1:
To add multiple Keyframe selectors in an animation:
@keyframes Mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

EXP2:
To change multiple CSS styles in one animation:
@keyframes Mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

EXP3:

Multiple Keyframe selectors with multiple CSS styles:
@keyframes Mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}

}

------------------------------------------------------------------------------------
Syntax: animation:name duration timing-function delay iteration-count direction;

Syntax: Animation: Animation name finish when the time is fast when slow animation delay the number of times the play is reversed

The

Animation property is a shorthand property for setting six animation properties:
animation-name                    Specifies the keyframe name that needs to be bound to the selector:
animation-duration                   specifies the time, in seconds or milliseconds, that the animation will take to complete. The
animation-timing-function           specifies the speed curve of the animation.
animation-delay                      specifies the delay before the animation starts. The
animation-iteration-count           specifies the number of times the animation should play.
animation-direction                  Specifies whether the animation should be rotated in reverse.
Note: Always specify the Animation-duration property, otherwise the animation will not play if the duration is 0.
object.style.animation= "Mymove 5s Infinite"

------------------------------------------------------------------------------------
Syntax: Animation-name:keyframename|none;
KEYFRAMENAME Specifies the name of the keyframe that needs to be bound to the selector.
None specifies no animation effect (can be used to override animations from cascading).
JavaScript syntax: object.style.animationname= "Mymove"

------------------------------------------------------------------------------------

Syntax: Animation-duration:time;

The Animation-duration property defines the time, in seconds or milliseconds, that the animation will take to complete a cycle.
object.style.animationduration= "3s"

Specifies the time it takes to complete the animation. The default value is 0, which means there is no animation effect.
Always specify the Animation-duration property, otherwise the duration is 0 and the animation will not play.
JavaScript syntax: object.style.animationduration= "3s"
------------------------------------------------------------------------------------
Syntax: Animation-timing-function:value
animation-timing-function Specifies the speed curve of the animation.
The speed curve defines the time it takes for an animation to change from one set of CSS styles to another.
The speed curve is used to make the change smoother.

Default value: Ease
JavaScript syntax: object.style.animationtimingfunction= "Linear"

Animation-timing-function uses a mathematical function called a three-time Bezier (Cubic Bézier) function to generate a velocity curve. You can use your own values in the function or predefined values:
Linear animations are the same speed from beginning to end. Test
Ease default.    The animation starts at low speed, then accelerates and slows down before it ends. Test
Ease-in animations start at low speed. Test
Ease-out animation ends at low speed. Test
Ease-in-out animations start and end at low speed. Test
Cubic-bezier (N,n,n,n) is its own value in the Cubic-bezier function. The possible values are numbers from 0 to 1.

Cubic-bezier (N,n,n,n)

Exp: (0,1,0,1) = (Animation transition time 0 sec 1 0 1) Slow flush
Example 1
To better understand the different timing function values, here are five different div elements that set five different values:
*/* and Opera: */
#div1 {animation-timing-function:linear;}
#div2 {animation-timing-function:ease;}
#div3 {animation-timing-function:ease-in;}
#div4 {animation-timing-function:ease-out;}
#div5 {animation-timing-function:ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function:linear;}
#div2 {-moz-animation-timing-function:ease;}
#div3 {-moz-animation-timing-function:ease-in;}
#div4 {-moz-animation-timing-function:ease-out;}
#div5 {-moz-animation-timing-function:ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function:linear;}
#div2 {-webkit-animation-timing-function:ease;}
#div3 {-webkit-animation-timing-function:ease-in;}
#div4 {-webkit-animation-timing-function:ease-out;}
#div5 {-webkit-animation-timing-function:ease-in-out;}
------------------------------------------------------------------------------------

Syntax: Animation-delay:time;

Definition and usage
The Animation-delay property defines when the animation starts.
The Animation-delay value is measured in seconds or milliseconds.
Tip: Allow negative values, -2s start the animation immediately, but skip 2 seconds to enter the animation.

JavaScript syntax: object.style.animationdelay= "2s"
Time is optional. Defines the time, in seconds or milliseconds, to wait before the animation starts. The default value is 0.

Try it yourself-example
Negative value, notice that the animation skips 2 seconds into the animation cycle:
Animation-delay: -2s * * and Opera * *
-moz-animation-delay: -2s/* Firefox */
-webkit-animation-delay: -2s/* Safari and Chrome */
------------------------------------------------------------------------------------

Syntax: Animation-iteration-count:n|infinite;

Definition and usage
The Animation-iteration-count property defines the number of times the animation plays.
JavaScript Syntax: object.style.animationiterationcount=3

n defines the number of times the animation plays. 、
Infinite specifies that animations should be played on an unlimited number of times.
------------------------------------------------------------------------------------

Syntax: animation-direction:normal|alternate;
Definition and usage
The Animation-direction property defines whether the animation should be rotated in reverse.
If the Animation-direction value is "alternate", the animation plays normally in odd number of times (1, 3, 5, and so on) and plays backwards in an even number of times (2, 4, 6, and so on).
Note: If you set the animation to play only once, the property has no effect.

JavaScript syntax: object.style.animationdirection= "Alternate"

Normal default value.    The animation should play normally. Test
Alternate animations should rotate backwards.
------------------------------------------------------------------------------------

Syntax: animation-play-state:paused|running;

The Animation-play-state property specifies whether the animation is running or paused.
Note: You can use this property in JavaScript so that you can pause the animation during playback.
JavaScript syntax: object.style.animationplaystate= "Paused"
Paused specifies that the animation is paused. Test
Running specifies that the animation is playing.
------------------------------------------------------------------------------------

Syntax: Animation-fill-mode:none | Forwards | Backwards | Both

Definition and usage
The Animation-fill-mode property specifies whether animations are visible before or after the animation is played.
Note: Its property values are one or more fill-mode keywords separated by commas.
Default value: None
Inheritance: No
Version: CSS3
JavaScript Syntax: Object.style.animationfillmode=none

Value Description
None does not change the default behavior.
Forwards when the animation is complete, the last property value (defined in the last Keyframe) is maintained.
Backwards apply the Start attribute value (defined in the first keyframe) for a period of time specified by Animation-delay before the animation is displayed.
Both both forward and backward fill modes are applied.

////////////////////////////////////////////////////////////////////////////