USING ANIMATION IN CSS

Separated notations
animation: animationName 4s linear 1.5s infinite alternate none
1) animationName : The name of the animation as specified at the keyframes. Many of the available CSS properties can be animated. If set to none no animation is executed.
2) 4s : The duration of the animation, in this case it lasts 4 seconds. Defaults to 0 meaning that there is no animation at all (which is actually senseless). Negative values are not allowed.
3) linear(Optional) : The timing-function, which describes how the animation will proceed over its duration. It applies to every single keyframe and not the whole animation and is specified using a bezier curve (and can also be set as one). In the current case the animation is played linear without an acceleration or a slowdown. Defaults to ease which results in a fast beginning and a slowdown at the end. ease-out is quite the same but not so fast at the beginning. ease-in accelerates the animation smoothly at the beginning with no slowdown at the end. At last ease-in-out stands for an acceleration at the beginning and a slowdown at the end.
There is also the possibility of step-values, which let the animation jump between the individual keyframes instead of a smooth transition.
4) 1.5s (Optional) : The animation starts with a delay of 1.5 seconds. If not set or set to 0 the animation will begin immediately, if negative it will begin part-way through its play cycle.
5) infinite (Optional) : The iteration-count defines how often the animation is played. The default value is 1, meaning that it will play from the beginning to the end once. A value of infinite makes the animation to run forever, decimal values cause it to end in between its play cycle.
6) alternate (Optional) : The direction of the animation. If set to alternate every second iteration of the animation is played back to front. Defaults to normal, meaning that every play cycle starts from the beginning.
7) none (Optional) : The fill mode. If set to forwards, the last keyframe remains at the end of the animation, as far as the iteration-count (5) is uneven. If set to backwards and a delay (4) is specified likewise, the first keyframe is shown at the start of the animation instead of the normal appearance of the element. both combines these two value, the standard value none omits them.

Keyframes
@keyframes animationName {
0% {top: 0px}
33% {top: 50px; animation-timing-function: ease-out}
100% {top: 100px; left: 10px}
}

1) animationName : The name of the animation. Links the keyframes to the animation itself and must be the same as 1 at the animation properties.
2) 0% {top: 0px} : A keyframe (as well as 3 and 4). Consits on one side of a percentage value – which determines the placement of the keyframe in the animation -, as well as one or more CSS properties and values that define the state of the animation at this point.
In this case it’s the starting point of the animation, since it has a percentage value of 0 (can also be defined by the keyword from). At this point the top position of the element is 0px.
3) 33% {top: 50px;} (Optional) : At 33% of the animation’s time the element is at a top position of 50px, which brought it a bit downwards.
4) animation-timing-function: ease-out(Optional) : Additionally it is possible to set a timing-function per keyframe which overwrites the general timing function set at 3 at the animation properties. Also takes the same values.
5) 100% {top: 100px; left: 10px} : The end of the animation. It’s also possible to use the keyword to instead of 100%. Finally the top value of the element changes to 80px, moving it further down. Furthermore it has adopted a left position of 10px which moved it a bit right.

Separated notations
animation-name: animationName
animation-duration: 4s
animation-timing-function: linear
animation-delay: 1.5s
animation-iteration-count: infinite
animation-direction: alternate
animation-fill-mode: none

Two animations specified at once Example
animation: changeColor 3s infinite, changeSize 2s ease-in 1s infinite;
@keyframes changeColor {
0% {
background-color: red;
border-color: black;
}
100% {
background-color: green;
border-color: yellow;
}
}
@keyframes changeSize {
0% {transform: scale(1)}
65% {transform: scale(1.2)}
100% {transform: scale(1.4)}
}
1) The first animation for the element has a duration of 3 seconds for each iteration and repeats infinitely. Since there is no timing-function set it defaults to linear.
2) The second animation lasts 2 seconds and has a timing-function of ease-in (smooth acceleration at the beginning, no slowdown at the end). It starts after a delay of 1 second and together with the duration of 2 seconds it also last 3 seconds.
3) The keyframes for the first animation: The element starts with a background-color of red as well as a border-color of black and finishes with a background-color of green and a border-color of yellow at the end.
4) The keyframes for the second animation, which starts at the original size of the element, adopts 1.2 times the size at 65% and ends with 1.4 times the size.

Blinking animation Example
animation: blink 1s step-end infinite;
@keyframes blink {
0% {background-color: blue}
50% {background-color: black}
}
1) One iteration of the animation lasts one second and changes immeditately between its keyframes without a transition. It runs infinitely.
2) The background-color changes from blue to black.

Advertisements

3 thoughts on “USING ANIMATION IN CSS

  1. Pingback: Beginning Part 2 | surulirajan

  2. You post interesting articles here. Your blog deserves
    much more visitors. It can go viral if you give it initial boost, i know useful tool that
    can help you, simply search in google: svetsern traffic tips

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s