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.

Example. When a user place the mouse over a Div, it changes gradually its width.
<style>
#iddv {
 width:90px;
 height:90px;
 background:#b8b9fe;
 font-size:18px;
 transition-property: width; 
 transition-duration: 1.5s;
}

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

<h4>Example transition width</h4>

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

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.5 seconds, and 'ease-out' speed) when the mouse is over an element with class='clse'.
<style>
.clse {
 width:150px;
 font-size:12px;
 transition: font-size 0.5s ease-out; 
}

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

<h4>Example transition font-size</h4>
<p>Place the cursor over each link.</p>

<ul>
 <li class='clse'><a href='https://coursesweb.net/css' title='Free CSS Course'>Free CSS Course</a></li>
 <li class='clse'><a href='https://coursesweb.net/html' title='HTML Course'>HTML Course</a></li>
 <li class='clse'><a href='https://gamv.eu/' title='Flash Games'>Flash Games</a></li>
</ul>

transition multiple CSS properties

You can 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>
.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;
}

.clsdv:hover {
 background: #00da01;
 opacity:0.5;
 transform:rotate(180deg);
}
</style>

<h4>Example transition multiple properties</h4>
<p>Place your mouse cursor over the following rectangle.</p>

<div class='dv1'>
 <div class='clsdv'></div>
 Some hidden text
</div>

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 HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
CSS3 transition

Last accessed pages

  1. SHA256 Encrypt hash in JavaScript (10160)
  2. Node.js Move and Copy file (13783)
  3. Contact page - CoursesWeb (27245)
  4. Tabs effect with CSS (27920)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (34515)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1317)
  2. Contact page - CoursesWeb (1288)
  3. Tabs effect with CSS (1285)
  4. PHP getElementById and getElementsByTagName (584)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (487)