CSS3 transition

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:

transition-property - Specifies the name or names of the CSS properties to which 'transition' should be applied (like: width, color, font-size, etc.).
- CSS3 transition can be used to animate the CSS properties listed here: CSS animatable properties
transition-duration - Specifies the duration over which transitions should occur, in seconds (s), milliseconds (ms), (default 0).
transition-timing-function - Describes how the speed during a transition will be calculated:
- ease (default), linear, ease-in, ease-out, ease-in-out
transition-delay - Defines how long to wait utill the transition will start (default 0)

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.

<<-CSS3 2D transforms -- Creating Double Level Menu ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag adds an image in web page?

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

Which of these CSS codes displays the text oblique?

font-style: italic; text-decoration: underline; font-weight: 500;

#id {
  font-style: italic;
}

Click on the jQuery function used to hide with animation a HTML element.

click() hide() show()

$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});

Click on the correctly defined function in PHP.

fname function() {} function fname() {} function $fname() {};

function fname($a, $b) {
  echo $a * $b;
}