Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Create Animations with CSS

This article will make people learn on the things that we can do with CSS and we will work on the CSS animations requiring no hovers or accessing from the mouse.

For the purpose of this tutorial, we will make the CSS3 using border radius and animation techniques that are proved to be best viewed in Safari and Chrome. Talking about the Firefox and Internet Explorer, animations don't work over there. However the hover effects over the names of the planets work fine. We will discuss on the CSS3 code and also will look at the different CSS3 animation properties.

A look at the CSS3 Code!

The below code represents the border radius effect that will make the solar system appear circular:

Listing 1: Representing the code to bring in the border radius effect

ul.solarsystem li.sun {
      width: 40px;
      height: 40px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      }

The below code represents the code for each planet:

Listing 2: Representing the code for each planet

ul.solarsystem li {
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-timing-function:linear;
      -webkit-animation-name:orbit;
      }

ul.solarsystem li.earth span {
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-timing-function:linear;
      -webkit-animation-name:moon;
       }
      ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
      ul.solarsystem li.venus {-webkit-animation-duration:8s;}
      ul.solarsystem li.earth {-webkit-animation-duration:12s;}
      ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
      ul.solarsystem li.mars {-webkit-animation-duration:20s;}
      ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
      ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
      ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
      ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
      ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
      ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

@-webkit-keyframes orbit { 
      from { -webkit-transform:rotate(0deg) } 
      to { -webkit-transform:rotate(360deg) }

The W3C denotes or defines the animation-iteration property as, "...the frequency in which an animation cycle is played. As far as the default value is concerned, it is one which means that the animation will play from beginning to end once and on the other hand when we have value of 'infinite', it will not cause the animation to stop forever. Talking about the non-integer numbers, it will cause the animation to end part-way through a cycle and negative values for 'animation-iteration-count' are generally treated as zero. This property is mostly made use of with an 'animation-direction' value of 'alternate'. This will cause the animation to play in reverse on alternate cycles." In the Solar System demo that we presented above, its count is infinite. This is just to make the planets orbit the sun continuously. The interesting point to note here is that CSS3 is now used to cover more ground than just static layouts; hover and click effects and this proves to be very interesting in terms of creating animated web content that does not require Flash.

We have W3C that has working drafts for lot of animation attributes that comprise of the following.

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-delay
  • animation

Let us take a look at these properties as set by the W3C.

animation-name

The 'animation-name' property gives back a list of animations that is being applied where each name made use of so as to select the keyframe at-rule. This rule provides the property values for the animation and in case the name does not match any keyframe at-rule, you will have no properties that can be animated. In this situation the animation will not execute. And then if we have animation name as 'none' then there will be no animation. This can also be made use of so as to override any animations coming from the cascade.

Talk about the animation-duration

The length of time that an animation takes to complete one cycle is defined by the 'animation-duration' property.

Introduction to animation-timing-function

The 'animation-timing-function' property signifies the process of animation to progress over one cycle of its duration and is related to the 'transition-timing-function' property.

A Brief on animation-direction

The 'animation-direction' property basically is used to define if the animation should play in reverse on alternate cycles or not. In case we have 'alternate' as specified, the animation cycle iterations with an odd counts are played in the normal direction and the one with an even counts are played in a reverse direction. The timing functions are also reversed when an animation is played in reversed. Example includes the situation when an ease-in animation played in reverse would appear to be an ease-out animation.

A look at the animation-delay

Talking about the 'animation-delay' property, it is basically defined when the animation will initiated and permits the animation to begin execution some time post it is applied. When we have an 'animation-delay' value of '0', this means that the animation will execute the moment it is applied else we will have the value specifying an offset from the time the animation is applied, and the animation will delay execution by that offset. In case we have 'animation-delay' with a negative time offset value then the animation will execute the moment it is applied. However it will appear to have started its execution at the specified offset. This means that the animation will appear to begin part-way through its play cycle. The starting values are taken from the time when the animation is applied in those situations where an animation has implied starting values and a negative 'animation-delay'.

Animation

We have the "animation" shorthand property that is used to combine six of the animation attributes into a single property.

Final Output (It will be in revolving state)

Figure 1: Final Output (It will be in revolving state)

Conclusion

We learned how to come up with an animation without the need of hovering over or clicking of a mouse with the help of CSS3.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login