How to Apply CSS3 Effects and Transforms in Dreamweaver
CSS Code Hinting in Dreamweaver
How to Create a Media Query in Dreamweaver

How to Make Transitions with CSS3

Talk about powerful new features in cascading style sheets (CSS): By pairing the :hover pseudo-class with the CSS3 transition property, you can add slick interactive features to your objects without the use of Flash, JavaScript, or jQuery!

The transition property actually has four settings, which should be written in the CSS in the following order: property, duration, timing-function, delay.

The following list describes the settings:

  • transition-property: Identifies which CSS property will alter, such as the width or height, as in transition-property:width;.

  • transition-duration: Sets the value in seconds for the transition to complete, as in transition-duration: 5s;.

  • transition-timing-function: Specifies the speed curve of the effect. Values may be set to linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier(n,n,n,n), as in this example: transition-timing-function: linear;, which is equivalent to cubic-bezier(0,0,1,1).

  • transition-delay: Determines how many seconds will elapse before the effect begins, as in transition-delay: 2s;.

In the following code example, after a 2-second delay, an orange box smoothly changes over 5 seconds from 100px to 500px wide when a visitor hovers the mouse over the <div> container:

<!DOCTYPE html>
<style type="text/css">
div {
  background-color: #F90;
  transition: width 5s linear 2s;
  -moz-transition: width 5s linear 2s; /* Firefox 4 */
  -webkit-transition: width 5s linear 2s; /* Safari & Chrome */
  -o-transition: width 5s linear 2s; /* Opera */
div:hover { width:500px; }
blog comments powered by Disqus
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel
How to Create Hyperlink Styles with Pseudo-Classes in Cascading Style Sheets (CSS)
How to Use the :not() Selector in CSS3
How to Create Menus in CSS3