The transitions can be used to animate the CSS properties, adding an animation effect when changing CSS property of a HTML element, to gradually change from one style to another.
The CSS3 transition has 4 components:


To use CSS3 transition, you must specify two things:
      1. The CSS property you want to add an effect to ( transition-property ).
      2. The duration of the effect ( transition-duration ).
- The last two components ( transition-timing-function and transition-delay ) are optional.
- Internet Explorer supports CSS3 transition starting with IE 10.

Example. When a user mouse-over a Div, changes gradually its width.
<style type="text/css"> 
#iddv {
 width:80px;
 height:80px;
 background:#b8b9fe;
 font-size:18px;
 transition-property: width;  
 transition-duration: 1.4s;

/* Firefox 4 */ 
 -moz-transition-property: width;
 -moz-transition-duration: 1.4s;
/* Safari and Chrome */ 
 -webkit-transition-property: width;
 -webkit-transition-duration: 1.4s;
/* Opera */
  -o-transition-property: background-color, color;  
  -o-transition-duration: 1.4s;
}

#iddv:hover {
 width:200px;
}
</style>

<div id="iddv">Hover over this square.</div>

Demo (When the cursor mouse out of the element, it gradually changes back to its original style):
Hover over this square.

transition shorthand property

You can use all the four components into a single transition shorthand property.
Syntax:
transition: transition-property transition-duration transition-timing-function transition-delay;
Example: Change gradually the "font-size" (in 0.4 seconds, and "ease-out" speed) when the mouse is over an element with class="clse".
<style type="text/css"> 
.clse {
 width:150px;
 font-size:13px;
 transition: font-size 0.4s ease-out; 
 -moz-transition: font-size 0.4s ease-out;  /* Firefox 4 */ 
 -webkit-transition: font-size 0.4s ease-out;  /* Safari and Chrome */
  -o-transition: font-size 0.4s ease-out;  /* Opera */
}

.clse:hover {
 font-size: 16px;
}
</style>

<ul>
 <li class="clse"><a href="http://coursesweb.net/css/" title="Free CSS Course">Free CSS Course</a></li>
 <li class="clse"><a href="http://coursesweb.net/html/" title="HTML Course">HTML Course</a></li>
 <li class="clse"><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul>

Demo {place the cursor over each link}:

• You can also add a transitional effect for more than one style, by adding more properties, separated by commas.
Example. Add effects on the background, opacity, and the transformation:
<style type="text/css"> 
.dv1 {
 width:115px;
 height:100px;
 position:relative;
 font-size:17px;
 text-align:center;
 padding-top:18px;
}

.clsdv {
 width:120px;
 height:100px;
 position:absolute;
 top:0;
 left:0;
 background:#b8b9fe;
 transition: background 1.3s, opacity 1.8s, transform 1.4s; 
 -moz-transition: background 1.3s, opacity 1.8s, -moz-transform 1.4s;  /* Firefox 4 */ 
 -webkit-transition: background 1.3s, opacity 1.8s, -webkit-transform 1.4s;  /* Safari and Chrome */
  -o-transition: background 1.3s, opacity 1.8s, -o-transform 1.4s;  /* Opera */
}

.clsdv:hover {
 background: #00da01;
 filter:alpha(opacity=50);     /* for IE */
 opacity:0.5;
 transform:rotate(180deg);
 -moz-transform:rotate(180deg); /* Firefox 4 */
 -webkit-transform:rotate(180deg); /* Safari and Chrome */
 -o-transform:rotate(180deg); /* Opera */
}
</style>

Hover over this rectangle.
<div class="dv1">
 <div class="clsdv"></div>
 Some hidden text
</div>
Demo:
Hover over this rectangle.
Some hidden text

CSS animatable properties

List of CSS properties that can be used in transitions (and animations):

- Text properties:   color, font-size, font-weight, letter-spacing, line-height, text-indent, text-shadow, vertical-align, word-spacing.
- Box properties:   background, background-color, background-image, background-position, border-left-color etc., border-spacing, border-left-width etc., clip, crop, height, min-height, max-height, margin-left etc., opacity, outline-width, outline-offset, outline-color, padding-left etc., width, min-width, max-width.
- Positioning properties:   bottom, top, left, right, grid-, visibility, z-index, zoom .

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
CSS3 transition

Last accessed pages

  1. Get Lower, Higher, and Closest Number (1449)
  2. Ajax-PHP Chat Script (31512)
  3. Download PHP MySQL resources (447)
  4. Flash Games - Free online Games (14878)
  5. CKEditor Free Image Uploader Addon (4982)

Popular pages this month

  1. Qwop (4653)
  2. Bubbles3 (3755)
  3. Butterfly Kyodai (3124)
  4. Drag Racer V3 (3079)
  5. Zuma Deluxe (2227)