Our Official Blog

CSS3 Allows Animation of HTML Document Elements

It has been observed that web designers of today’s time prefer using a style sheet language like CSS in order to describe the look as well as formatting of a document which is specially written in a markup language like HTML. CSS which stands for Cascading Style Sheets is basically a style sheet language which is used widely to give a unique style to web pages.

Cascading Style Sheets plays a vital role when it comes to website designing. It will be better to say that this particular style sheet language undoubtedly enhances the performance of a website and is the key to a website success. The demand and need of CSS3 keyframe animations are increasing with the passage of time and also with the growth of latest technology. Today, CSS serves their purpose in creating animations.

css3animation

A web designer needs to understand the significance of CSS3 animation code. Using and understanding this particular code is simple. You can have the unique opportunity to define animations for any kind of web page elements by using a few lines of CSS3 animation codes.

In addition to this, contemporary and creative web designers can also have the liberty to add images to any web page document written in a markup language like HTML. Applying and positioning of the images in a web page element is also vital for a web designer.

Now, after making you aware of the significance and value of a style sheet language like CSS, it’s time for you to know how CSS3 keyframe animations are helpful to the IT experts. Today, with the growth of latest technology and of course with the innovation of this particular style sheet language, developers of today’s time can create animations which are smooth and easy to maintain.

While using CSS3 animation code, the first thing which you will definitely observe is the keyframes @ rules. An identifier usually follows this specific rule. Here lies an example of how a developer uses CSS @ rules: The important point which needs to be noticed in the following lines of code is that ‘0 is the starting point and 100 is the ending point’.

[css]
@-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; (This code is for safari)
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; (This code is for Mozilla)
-o-animation: NAME-YOUR-ANIMATION 5s infinite; (This code is for opera)
animation: NAME-YOUR-ANIMATION 5s infinite; (This code is for internet explorer)
[/css]

After discussing much about the significance and value of CSS3 animation code, it’s time for you to know how this code helps in creating animations with separate properties. Here presents an example of how to create animations by using CSS3 keyframe animation code with separate and different properties:

[css]
.box {
animation-name: bounce;
[/css]

CSS animation name property helps in giving a specific name mainly for the @keyframes animation.

[css]
animation-duration: 4s;
[/css]

This particular property of CSS3 animation code defines the time taken to complete one cycle of an animation.

[css]
animation-iteration-count: 10;
[/css]

Animation iteration count property is unique in the sense that it helps in defining the number of times an animation should be played.

[css]
animation-direction: alternate;
[/css]

This property of CSS3 keyframe animation describes whether the animation should be played in reverse on alternate cycles.

[css]
animation-timing-function: ease-out;
[/css]

Animation timing function defines specifically the speed of the curve of the animation.

[css]
animation-fill-mode: forwards;
[/css]

This specific property of CSS3 keyframe animation defines what style needs to be applied on the element when the animation is not working rather playing.

[css]
animation-delay: 2s;
[/css]

The animation delay property determines and defines when the animation is going to start.

keyframeanimation

Some of the factors like the name which is indicated in the keyframes section, specific duration and timing or easing function needs to be considered while creating a smooth and maintainable animation by using CSS3 animation code. In addition to this, one can define animation by using even a single line of CSS3 animation code by using the unique shorthand animation declaration. Here follows an example of CSS3 animation shorthand:

[css]
-webkit-animation: test 1s 2s 3 alternate backwards;
[/css]

CSS3 animation code can be supported by browsers like Firefox 5+, Internet Explorer 10+, Chrome, Safari 4+ and Opera 12+. Creating animated web page elements and even a document written in a markup language like HTML is possible with the help of a special style sheet language like CSS and some specific lines of CSS3 animation code. This particular style sheet language helps in presenting the same document written in HTML in different rather unique styles. World Wide Web Consortium (W3C) took the initiative to handle and maintain CSS specifications and therefore this type of style sheet language ensure smooth creation of animations.

Author: Subarna Roy

Hello everybody !! I am Subarna. I am a designer. Web Design is not just my job it’s my passion. I love to play with color, shape, size & pattern. As a web designer, I am very well acquainted with all the parameters that work in making a website success. I design websites that are not only visually fantastic to look at, but also have the capability to complete a website as per as client requirement.

Leave a Reply

Copyright 2018 Sketch Web Solutions | Privacy Policy | Terms & Conditions