How to Enhance Your Sites with CSS3 Animations
+234 816 619 6130 Friday - Oct 21, 2016

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.

©2015 TechAtLast Int'l Media, Inc. All Rights Reserved.
  1. Brian D. Hawkins

    September 16, 2011 at 2:43 am

    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.

    • Olawale Daniel

      September 16, 2011 at 6:34 am

      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

    September 16, 2011 at 6:43 am

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

  3. shenoyjoseph

    September 16, 2011 at 1:21 pm

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

  4. Kal

    September 18, 2011 at 4:46 am

    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.

    • techatlast

      September 18, 2011 at 10:21 pm

      Hopefully. Let’s hope…

      • Kal

        September 19, 2011 at 5:14 pm

        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.

  5. Priyangshu

    September 18, 2011 at 7:42 am

    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 !

    • techatlast

      September 18, 2011 at 10:18 pm

      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…

      • Priyangshu

        September 19, 2011 at 1:04 am

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

        • techatlast

          September 19, 2011 at 11:31 am

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

  6. Kunal

    September 19, 2011 at 5:14 am

    Nice article. and helpful too.

    • techatlast

      September 19, 2011 at 11:28 am

      Hi Kunal, Thanks for your comment 🙂

  7. Jasmine

    September 19, 2011 at 11:35 am

    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

    October 9, 2011 at 10:23 pm

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

    • techatlast

      October 10, 2011 at 1:40 am

      Thanks for sharing your experience friend. 🙂

  9. Mitch Ribak

    October 16, 2011 at 8:56 pm

    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.

    • techatlast

      October 17, 2011 at 9:20 pm

      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

    December 14, 2011 at 10:53 am

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

    • Olawale Daniel

      March 2, 2014 at 11:06 pm

      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.

Predefined Skins

Primary Color

Background Color

Example Patterns

demo demo demo demo demo demo demo demo demo demo