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 {
 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 {

<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.
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 {
 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;

 <li class="clse"><a href="" title="Free CSS Course">Free CSS Course</a></li>
 <li class="clse"><a href="" title="HTML Course">HTML Course</a></li>
 <li class="clse"><a href="" title="Flash Games">Flash Games</a></li>

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 {

.clsdv {
 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 */
 -moz-transform:rotate(180deg); /* Firefox 4 */
 -webkit-transform:rotate(180deg); /* Safari and Chrome */
 -o-transform:rotate(180deg); /* Opera */

Hover over this rectangle.
<div class="dv1">
 <div class="clsdv"></div>
 Some hidden text
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

Which tag is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert(""); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food = array("fruits" => array("banana", "apple"), "veggie" => array("collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
CSS3 transition

Last accessed pages

  1. CKEditor Free Image Uploader Addon (4502)
  2. Multidimensional arrays and array functions (4115)
  3. The Rise Of Atlantis (344)
  4. Mystic India Pop (907)
  5. Puzzle Games (2378)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (46193)
  2. Read Excel file data in PHP - PhpExcelReader (34685)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (34542)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (31135)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (28363)