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 is used to include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
CSS3 transition

Last accessed pages

  1. Convert XML to JSON in JavaScript (13623)
  2. Remove / Get duplicate array values - Reset array keys in PHP (6698)
  3. jqPlot Charts (4042)
  4. jQuery parent, children and nth-child() (9010)
  5. Santas Ride (31)

Popular pages this month

  1. Bubbles3 (4787)
  2. Butterfly Kyodai (3589)
  3. Zuma Deluxe (2934)
  4. Backgammon (1742)
  5. Qwop (1741)