CSS3 with Motion

CSS3 with Motion is the section 9 of Basics of CSS3.

Before introducing CSS3, we add motion to web pages by using JavaScript, Flash or animated images such like gif formatted images. But with the emerge of CSS3, how things were done was all changed. Look at the following. Just hover your mouse cursor over to the following element. What we did there is pure CSS with the features offers with its version 3.

CSS3 Transition


So let’s see what kind of options that CSS3 transition offers to add motion to HTML elements.

CSS3 Transitions

They are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

For example look at the following syntax.

[code language=”css”] div {
width: 100px;
transition: width 2s;

It add a transition effect on the width property, with a duration of 2 seconds. But remember if the duration part is not specified, the transition will have no effect. The starting width will be 100px. The transition effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element. So with the above code you need a pseudo class hover with the width property in a division tag. The ending width will be 300px. So with this code segment the width of division element will changed gradually from 100px to 300px.

[code language=”css”] div:hover {
width: 300px;

Look at how it looks like. Just hover your mouse cursor over to the following element.

CSS3 Transition

Did you notice that when the mouse cursor out of the element, it gradually changes back to its original style.

Multiple effects

How about adding effects more than one on the transition property? We already know how to change the width gradually. What about giving it a rotation as well?

[code language=”css”] div{
width: 100px;
height: 100px;
transition: width 2s, height 2s, transform 2s;
div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);

We need to separate the effects by a comma. The starting rotating transform property doesn’t need to be define because it will take default as zero degrees.

Hover over here to see the transition effec

So the transition property we introduced here was the shorthand transition property. If you like to know the standard properties of the transition here is the list.

Property Description CSS
transition A shorthand property for setting the four transition properties into a
single property
transition-delay Specifies when the transition effect will start 3
transition-duration Specifies how many seconds or milliseconds a transition effect takes to
transition-property Specifies the name of the CSS property the transition effect is for 3
transition-timing-function Specifies the speed curve of the transition effect 3

This can be written as follows if you like it on the long way.

[code language=”css”] div{
transition-property: width;
transition-duration: 1s;

So we gave some motion to HTML elements in this section. Next section will be more cooler than this because we are going to animate HTML elements in there. So don’t forget to check it out.



Explore CSS3 with Animation.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below