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.


26 responses to “How to Enhance Your Sites with CSS3 Animations”

  1. Brian D. Hawkins Avatar
    Brian D. Hawkins

    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.

    1. Olawale Daniel Avatar

      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. Naser Avatar

    This article spinned my head right round. I’m a newbie in CSS but Iam quite familiar with HTML.

  3. shenoyjoseph Avatar

    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. 🙂

    1. Olawale Daniel Avatar

      Thanks for your comment Joseph.

  4. Kal Avatar

    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.

    1. techatlast Avatar

      Hopefully. Let’s hope…

      1. Kal Avatar

        By accident I was reading an article in developer magazine, it was related to CSS3 + HTML5 game development in Facebook, there is a possibility to improve framing.

        1. techatlast Avatar

          Thanks for the comment.

  5. Priyangshu Avatar

    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 !

    1. techatlast Avatar

      Hi Pri, Thanks for your nice comment. I love to hear that you’re much familiar with CSS codes. Would you mind teaching our readers “how to do it” more in your guest post? Let me know if yes…

      1. Priyangshu Avatar

        Yeah , why not ? I will submit a guest post soon !!

        1. techatlast Avatar

          Thanks for your reply man. I will publish it as soon as possible. Thanks

  6. Kunal Avatar

    Nice article. and helpful too.

    1. techatlast Avatar

      Hi Kunal, Thanks for your comment 🙂

  7. Jasmine Avatar

    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.

  8. abhilash Avatar

    it is very helpful article
    ya IE is not supporting all CSS file , i facing this problem
    thank for this post

    1. techatlast Avatar

      Thanks for sharing your experience friend. 🙂

  9. Mitch Ribak Avatar
    Mitch Ribak

    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.

    1. techatlast Avatar

      You can use the suggested books on the topic via the links shared in this post via Amazon to read more about CS333.

      Thanks for your comment 🙂

  10. Jyoti Avatar

    Ahhhh that great tips on using CSS3. I have not really keen to use this in my website, but it seems really cool.

  11. D Isaac Avatar
    D Isaac

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

    1. Olawale Daniel Avatar

      Hi Isaac,

      Thanks for bring this to our notice. It is helpful. Keep it up 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

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