Make Animations With CSS : CSS Animation Property

Like the CSS transitions we have talked before, you must already know about CSS Animations. These are a very useful in the web to animate any objects on the web pages.

See below - an Example of CSS Animation.

CSS-Magz

CSS animations have 8 sub-hand properties. Which can be defined shortly by animation as same as transitions.CSS Animation property can be used with certain other properties such as color, height, width, background color etc. To define a timeframe in which all the process of animation will happen, we use @keyframes.

The example is given below.

See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.

Animation has total 8 sub-hand properties. Let first know about them step by step.

• animation-name

Animation name is an important property. It specifies which keyframes should be used for a particular animation. Here, it is a name given for the animation. It should be defined in keyframes as below.

• animation-delay

Animation delay is as same as in CSS transitions. It specifies the delay for the start of an animation. It is a numerical value in second.

• animation-duration

It is a total time in which the animation will play. Again it is the numerical value in seconds.

• animation-direction

Specifies to which direction the animation should happen. The default value is normal. Including normal, total six properties can be used here. They are reverse, alternate, alternate-reverse, initial and inherit.

• animation-fill-mode

Specifies a style for the element when the animation is not playing.  The default value is none. Other values are forwards, backwards, both, initial and inherit.

• animation-iteration-count

Set the number of times an animation should be played. Value is a simple number like 2.The default value is 1.Making it 0 stops the animation.

• animation-play-state

Specifies whether the animation is running or paused. The default value is running and pause, initial and inherit values can be used here.

• animation-timing-function

Specifies how smoother the animation should move.That is, it specifies the speed curves of the animation.The default value is ease and there can be many values used in it.Below is the list of that values.

1. linear - Animation has a uniform speed from start to end.
2. ease - Animation has a slow start and slow end.
3. ease-in - Animation has a slow start.
4. ease-out - Animation has a slow end.
5. ease-in-out - Animation has a slow start and a slow end.
6. step-start - similar to steps(1,start) see below
7. step-end - similar to steps(1,end) see below
8. steps(int,start/end) - Steps is a function type animation curve in which adding the number in place of int, for example 40, the animation will go in step wise.
9. cubic-bezier(n,n,n,n) - Define your own values ranging from 0-1.
10. initial -Will set the property to default value.
11. inherit -Will use the property of its parent element.

See all the examples on W3schools.

Making @Keyframes

The stranded syntax of keyframes is as follows-:

@keyframes animation-name{
    0%   {css-roperty:value; another css property:value;}    
    100% {css-roperty:value; another css property:value;}
}

Okay, so imagine your animation in form of a timeline.So at which percentage the things should move is in hand of keyframes. In percentage, you can define the whole timeline by changing the values.
For example, if a thing should change colour from red to blue you will set 0% to red and 100% to blue just like below.

@keyframes animate {
    0%   {background-color:red;}
    100% {background-color:blue;}
}

The Shorthand Property: 'Animation'

The above all 8 properties can be shorthand to a single property 'animation'.This can save a lot of space and time taken for timing.
It should be in the following form.

{   ....
    animation: name , duration , timing-function , delay , iteration-count , direction;
}

And there it is.

You can create very cool animations for your site or blog and use them. Many creative v beautiful example on Codepen.

• Tweet
• Share
• Share
• Share
• Share