CSS3 Tutorial

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 box-shadow

CSS3 text-shadow

CSS3 word-wrap

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 Nested Menu

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

CSS Question-Answer

Page Stats

Visitor: 343

CSS3 Transitions

CSS3 transitions allows you to change property values smoothly, over a given duration.

Example 1: Mouse over the element below to see a CSS3 transition effect:

<html>
   <head>
      <style>
         div {
            width: 100px;
            height: 100px;
            padding:10px;
            background: #ffc;
            border:1px solid red;
            -webkit-transition: width 2s;
            -moz-transition: width 2s;
            -o-transition: width 2s;
            transition: width 2s;
         }
      	div:hover {
      	   width: 350px;
      	}
      </style>
   </head>
   <body>
      <div>Hover over the div element, to see the transition effect.</div>
   </body>
</html>

Change Several Property Values

Example 2: Adds a transition effect for both the width and height properties.

<html>
   <head>
      <style> 
         div {
             width: 100px;
             height: 100px;
             background: red;
             -webkit-transition: width 2s, height 4s;
             transition: width 2s, height 4s;
         }
         
         div:hover {
             width: 280px;
             height: 280px;
         }
      </style>
   </head>
   <body>
      <div>Hover over the div element, to see the transition effect.</div>
   </body>
</html>

CSS3 transition-timing-function property

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

  1. ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default).
  2. linear - specifies a transition effect with the same speed from start to end.
  3. ease-in - specifies a transition effect with a slow start.
  4. ease-out - specifies a transition effect with a slow end.
  5. ease-in-out - specifies a transition effect with a slow start and end.
  6. cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function.
Output:

Example 2: Difference between linear transition, ease transition, ease-in transition, ease-out transition, ease-in-out transition.



Transition + Transformation

We can specify both the transition and transformation.

Output: