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
Click on the tag that creates an ordered list
<ul> <tr> <ol>
<ol>
  <li>List-1</li>
  <li>List-2</li>
</ol>
Which selector represents the ID of an element in CSS
.name #name name
#id {
  color: #0110fb;
}
What statement creates an object in JavaScript?
{} [] new Date()
var obj = {"site": "CoursesWeb.net", "pr": 5};
alert(obj.site);
Indicate the instruction used to evaluate if a condiition is True or False
else if() switch()
$var = 8;
if($var == 8) echo $var;
CSS3 transition

Last accessed pages

  1. Zuma Games (15357)
  2. Qwop (9103)
  3. Zuma Deluxe (20391)
  4. Selection Tools (3474)
  5. Volume and Surface Area Calculator for 3D objects (5558)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (49682)
  2. Read Excel file data in PHP - PhpExcelReader (38072)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (37003)
  4. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (30742)
  5. Ajax-PHP Chat Script (27567)