Try the HTML5 and CSS3 Course for Free!

Transitions in CSS3- Tutorial

/ / HTML, Latest

Transitions in CSS3: Video Lesson

            This video lesson, titled “Transitions,” shows how to apply transitions in CSS3. This video lesson is from our HTML5 and CSS3 course, titled “Mastering HTML5 and CSS3 Made Easy v.1.0.”

Transitions in CSS3: Overview

            Transitions in CSS3 allow you to change the state of an element, over a specific time, without having to use any other programs like Flash or JavaScript. For example, you can change the width of an element when a user hovers over it. Transitions are heavily dependent on the timing of the change. The default for TRANSITION-DURATION property is zero, so it is important to set a time; otherwise, your transitions will not work.  There are several transition properties listed in the table that follows.

            You can apply transitions in CSS3 to any property in your HTML coding that can be translated into a mathematical reference. For example, you can transition the font-weight of your text but not the font-face.

            The syntax for transitions in CSS3 is as follows: {transition: property_name duration timing_function delay;}. This example is for setting all the properties in one line (shorthand), where each property is listed separately using the full property name, separated by semicolons in the same curly brackets, as with any other CSS coding.

Property Description
transition Sets the rule to change the setting for the four transition properties into a single property.
transition-property Sets the rule to name the property the transition is applied to. (for example; width, font-weight, height, border, etc.)
transition-duration Sets the rule to define the duration of the transition. (in seconds (s) or milliseconds (ms))
transition-timing-function Sets the rule to define how the speed of transition is calculated. (ease (default), linear, ease-in, ease-out, ease-in-out, cubic-bezier())
transition-delay Sets the rule to define when the transition will start. (default is 0, in seconds (s) or milliseconds (ms))
Example div {width:100px; height:100px; background: blue; transition:width height; transition-duration:2s;}div:hover {width: 200px; height:200px;}
Result: Sets the div element to a size of 100px by 100px with a background color in blue and sets the transition of width and height to 200 px by 200 px to be changed over two seconds when the user hovers over the element.

Transitions in CSS3- Tutorial: A picture of a transition in CSS3 that is used to change the appearance of a DIV tag in an HTML5 page.

Transitions in CSS3- Tutorial: A picture of a transition in CSS3 that is used to change the appearance of a DIV tag in an HTML5 page.

Transitions in CSS3: Syntax

  1. Type: A {B:C; D:E; transition: F G; transition-duration:H;}
    (where “A” is the element you want to transition, “B” and “D” are the element properties, “C” and “E” are the values of the element properties, “F” and “G” are the properties you wish to transition (ie: width, height, etc.) and “H” is the duration of the transition in seconds (s) or milliseconds (ms))
  2. Type: A:B {C:D; E:F;}
    (where “A” is the element and “B” is the action (ie. :hover), “C” and “E” are the element properties that are transitioning and “D” and “F” are the element property values)
TOP