Skip to main content Skip to main navigation Skip to search Skip to footer
Type to Search Subscribe View Tags

CSS3 Animations & Transitions: The New TrendIntroduction to Animation

CSS3 Animations & Transitions: The New TrendIntroduction to Animation
Randhir Kumar - Technical Lead,Engineering R&D services | February 10, 2014
356 Views

Animation is an attractive feature available on the Web, which segregates the presentation of your Web page with a normal plain Web site. This enhances the interactivity of Web sites and provides an eye catchy podium. It ensures that you have kept the ‘end user’ in your mind while designing the minute particles of your page. This delights the visitor of the Web site and the first impression remains for long time.

Therefore, animation is great and greater is the impact of your Web site when it emerges with shooting animations.

But question comes to our mind when designing the Web page that how to deal with animation. What should be our approach while creating animations? As a matter of fact, there are various ways for adding animation, which are as follows:

  • CSS3
  • Flash
  • SVG
  • JQuery/JS

Limitations with other approaches

Flash

Various limitation of animation with Flash are as follows:

  • Search engines cannot index the content of the flash file
  • Flash files don’t work on iPhones and iPads, which are extremely popular
  • Text and information needs to be shortened as the content capacity of flash file is limited
  • Web sites with heavy flash and animation tend to load slowly and may cause visitors to leave
  • Flash animation is only viewable to visitors with the right Flash player and plug-ins installed
  • Flash files are very hard to update
JQuery

Various limitation of animation with JQuery are as follows:

  • JQuery javascript file to run jQuery commands is a mandatory requirement. Although the size of this file is relatively small, but must be linked to your code that causes over all load time to increase.
  • Developers need to be well versed with JQuery commands I order to yield the desired results.
SVG

Various limitation of animation with SVG are as follows:

  • Adobe SVG Viewer takes a great deal of time to download.
  • The SVG viewer makes extensive use of the CPU during the multiple screen recalculations required by SVG animations. This increases the load of CPU speed.

CSS3 Animation

CSS​We are talking about CSS3 animations and why it is one of the most talked about. The power of CSS3 is indeed overwhelming at least for small animations required for your website. The transition effects and CSS3 animation do not require any additional plug-ins and with the use of these awesome techniques you can manage your Web site with a lighter file size. A proficient designer can manage the output in the similar way he manages the output in the scripting/flash effect.

Benefits of CSS3

Some of the benefits of using CSS3 Animation approach are as follows:

  • Size : The first thing which attracts developer is the size of CSS3. Since CSS3 is much smaller in size, your code will be petite in comparison to others and you don’t have to create any specific stylesheet for it. You can work on your standard stylesheet. As there is no plug-in or extra scripting files required, so your loading time will be faster. File size is a major factor for the Web.

  • Accessibility: If your Web site is W3C Web standard compliant, then it will be completely accessible, no matter what technology you are using to browse the Internet.
    CSS benefits accessibility by separating the document structure from presentation. Style sheets were designed to allow the control of features, such as character spacing, text alignment, object position on the page, audio/speech output, and font characteristics.

  • Learning: CSS3 is very easy to learn, understand, and implement. Due to this is very popular amongst other entrants. CSS3 introduces few new properties, which makes it very powerful and attractive. These new techniques are really easy to understand and to work for an UX Developer. If you want to accomplish the requirement with JS, then it requires a fair amount of additional knowledge of scripting, which can be an undoing sometimes.   

How to work in CSS3

@keyframe Rule

The animation will have no effect unless the animation is created in  @keyframe and is bind it to a selector.

Bind the animation to a selector by specifying the following CSS3 animation properties:

  • Specify the name of the animation
  • Specify the duration of the animation
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

@CSS3 Transition

CSS3 Transition effects lets an element gradually change from one style to another.

To do this, you must the following:

  • Specify the CSS property you want to add an effect to.
  • Specify the duration of the effect.
<style> 
Div {
width:100px;
height:100px;
background:red;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
div:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari */
}
</style>

You can get more details at http://www.w3schools.com/css/css3_transitions.asp

Limitations

Apparently, pros and cons go hand in hand. So, after mentioning all these benefits of usingCSS3, we should also see the limitations of this flavor due to our legacy browsers. We should keep both the aspects in mind as many users still use older browsers such as IE 7 & 8. So, you should be the best judge in order to choose the best alternative, whether you are going with CSS3 or jQuery animations. Fortunately, there are a lot of supportive polyfills, which helps in legacy browsers. For simple animations, as stated in the above example, CSS is the best option.

Reference:


Contact Us
MAX CHARACTERS: 10,000

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

Sign in to Add this article to your Reading List
Register