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. MySQL Query Builder: Database Pagination (528)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (21106)
  3. Get the Height and Width of web Page and browser Window (2113)
  4. Register and show online users and visitors (33649)
  5. Fotorama Image Gallery (4133)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. Register and show online users and visitors (213)
  3. Node.js Move and Copy file (173)
  4. Read Excel file data in PHP - PhpExcelReader (159)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (155)