Css Course


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 tag adds an image in web page?
<div> <img> <span>
<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;
}
CSS3 transition

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (15150)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (60237)
  3. Create simple Website with PHP (31827)
  4. SHA512 Encrypt hash in JavaScript (18002)
  5. Extract a number of characters and words from string (2220)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (552)
  2. PHP Unzipper - Extract Zip, Rar Archives (535)
  3. SHA256 Encrypt hash in JavaScript (429)
  4. querySelector and querySelectorAll (425)
  5. Create simple Website with PHP (387)