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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
CSS3 transition

Last accessed pages

  1. PHP Unzipper - Extract Zip, Rar Archives (5731)
  2. Contact page - CoursesWeb (45935)
  3. AJAX Course, free Lessons (10652)
  4. Tabs effect with CSS (46522)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (53965)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (358)
  2. Tabs effect with CSS (348)
  3. Contact page - CoursesWeb (347)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (128)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (73)