How to Enhance Your Sites with CSS3 Animations

How to use CSS3 Animations on your website without facing big G’s trouble of crawling and indexing

Right from the beginning, web designers have benefited from using CSS. Having a clear separation between the style and the structure is essential for both simple and complex websites. Apart from clearly separating the style element, CSS has helped web designers to create complex styles with its simple rules.

On the other hand, even though web designers use CSS extensively, some of its features haven’t gained much popularity due to lack of browser support. CSS3 animation is supported by Chrome and Safari but Opera and IE do not support them yet. As a result, CSS3 animation properties are yet to become popular among web designers. But irrespective of its popularity, the animation feature itself is elegantly designed as it allows you to develop animations without much coding. Be it complex animation or simple animation, you can do all kinds of animations with CSS animation module. If you have to develop an animation without CSS, then you have to learn a complete software package. That can be a time consuming process depending on the complexity of the animation software.

Cascading style sheet  (CSS)

How to develop an animation using CSS3?


As with all CSS modules, animation too is defined as a set of properties. The key difference is the value of the animation properties are allowed to change over time. In any animation, you know the starting and ending time before hand, but depending on the type of animation, you should be able to control the intermediate values.

CSS3 uses “Keyframes” to obtain finer control of intermediate values. The keyframe rule starts with a @keyframes keyword followed by a user-defined identifier enclosed in single quotes. The keyframe rule then defines selectors with various percentages. It is necessary that every keyframe should have rules for 0% or 100%.

Every keyframe consist of a set of keyframe rules. Every keyframe rule in turn has a set of properties defined as key values pairs. If you define a property that cannot be animated, then that property is ignored by CSS instead of throwing an error. Moreover, you cannot cascade one keyframe within another one.

After you’ve define the keyframe, the next step is to apply this animation to an element. In order to identify this animation, you need to use the “animation-name” property. If you want to apply the animation defined above to “body” element, then you can do as follows:

body {
animation-name: myanimation;
}

CSS animation comes with many default properties. Here is a list of properties that you can override to fine tune the animation.

CSS - Cascading style sheet - border radius

1. “animation-name”:

This property takes the name of the animation that you define in the @keyframe property. If the name you provide here does not match with any keyframes, then the corresponding properties wouldn’t be animated. However, if you want to disable an animation for testing purpose, then you can give “animation-name” as “none”.

2. “animation-duration”:

This property defines the time to complete an entire cycle of an animation. The default value of this property is 0, which means there won’t be any animation unless you override this property to a positive value. Negative value to this property is considered as 0.

3. “animation-timing-function”:

If you want to control how an animation would progress over one cycle, then you have to override this property. The permitted values are ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier. If you want to understand about the functionality of each of these in depth, then you have to apply each of these values and analyze the animation behavior. The timing function that you specify controls the time between keyframes. By default, the value is “ease-in”.

4. “animation-iteration-count”:

This property defines the number of times an animation has to be repeated. The default value is 1, which means an animation is played once from start till the end. The permissible values are “infinite” for infinite looping or you can give any positive number.

With CSS3, you can easily include animation in any website without much hassle. CSS3 provides a number of animation properties that you can customize to develop complex animations. As almost every site uses CSS, including animation code in CSS would reduce the coding and testing time. This is certainly far easier than learning a new animation package and then including those frames in a web page.

Previous articleHigh-Quality Customer Support Requires More Than Text Chat
Next articleTop 5 Best Computer Tips and Tricks for 2011
Olawale Daniel is a business builder and psychologist, a network marketing professional, a world-class motivational speaker, a successful internet entrepreneur and a digital media strategist interested in all things mobile and digital — start-ups, media, branding. He started TechAtLast back in 2010 as a platform to quench his thirst for latest technologies. As a motivational speaker and author, Olawale has published several motivational and personal development books and he's currently working on "SUCCESS AHEAD - Don't Quit" which is billed to hit the stand by Q4 of the year. He writes regularly on his personal website on motivation and personal lifestyle and tips for network marketing success, OlawaleDaniel.com. His latest book on How to Sponsor More People in Your Network Marketing Business is still one of the best sellers in its category. He's presently working as a Health and Wellness consultant at BURN SLIM TRIM Inc., a firm that helps people regain their perfect lifestyle through state-of-the-art recent discoveries way back from nature. He's also the brain behind FOBCourse, a business university for startup entrepreneurs in Africa.

23 COMMENTS

  1. The how-to part of CSS3 is above my head but I googled it and there are some really great examples of CSS3 text and animations online. I’m using Chrome right now so they look fine. The same pages using IE shows the text and images, just not the animation. It’s sad there is always one or two popular browsers that delay technology by sitting on their hands waiting for things to “catch on” before they act. The good news is that Firefox seems to show the animation as well.

    • Hi Brian, Thanks a lot for your comment. TRULY too, I don’t have an idea of CSS3 before but with this article from a guest blogger on our site, I was able to research and learn new things about it. Thanks for your comment 🙂

  2. with the help of css style scripts we can do better animations to attract more of visitors and i think it the best way to enhance the website loading as fast as possible. 🙂

  3. I’ve recently try it and I was not satisfied with results, the animation is not moving slightly and frames do not blend well. Probably next generation of CSS will offer something better.

  4. Yeah , CSS helps you to add additional effects to your website and also enhances the capability of HTML . I am quite familiar with all types of CSS codes and i use these codes frequently !

  5. Wow, great tips on using CSS3 animation. I have not really used CSS3 in my website development, but these tips are so cool I will try them next time in my projects.

  6. At the moment, CSS3 is beyond my knowledge and sounds a bit complicated too but I find the whole package completely interesting and I’m definitely going to research on CSS3. I like doing simple animations but CSS3 is new to me and I’d like to learn about it.

  7. There is an animation topic as part of the CSS course over at w3university. Check it out if you have time –
    Thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.