Lately, using CSS3 Transition and Transformation, which is supported by some browsers becomes a very attractive new options for bloggers. Many animation can be created only by using CSS code. To make it very simple and is easier when compared with the javascript. Unfortunately, until now there is no standard for writing code (CSS3 transition and transformation). Of course, to create an HTML design became more complicated because some codes with similar functions should be written differently.
Some differences in the writing of the code happens in Opera. In this browser at the border and border transition radius is not perfect like in Mozilla, Safari and Google Chrome. Transision not work when you write the code like below:

-o-transition: border / border-radius (transition-duration) (transition-timing-function) (transition-delay);, such as the following example:
-o-transition: 2s ease border-in-out 500ms;
-o-transition: border-radius 1.2s 1s linear;

Transition border and border-radius only works when the code is written like this:

-o-transition: all-in ease 2s 1s;

Below are some examples of animation created with CSS3 transision and transformation. Especially in Opera, border and border radius (transition-property: border ... etc, and transition-property: border-radius .... etc) should be removed so he could work as expected.

Click the link below to open the tutorial!

Tutorial CSS3 Transition

Original tutorial by gubhug reyot

Example-1a and Example-1b has the same functionality but use different models of writing code.

CSS3 will create a change in size (animated) width, height and background color when the mouse over the box.

transition-propery: width, height, background;

Example-1a

gubhug reyot

Place mouse over here!

Example-1b

gubhug reyot

Place mouse over here!

CSS Code (Example-1a)

<style type="text/css">
.timingfunctiontransformdelay-1a {
      margin: 20px auto;
      width: 300px;
      height: 110px;
      background: red;
      -o-transition-property: width, height, background-color;
      -o-transition-duration: 0.3s, 1.1s, 1s;
      -o-transition-timing-function: ease-out, ease-in-out, linear;
      -o-transition-delay: 300ms, 900ms, 2500ms;
      -moz-transition-property: width, height, background;
      -moz-transition-duration: 0.3s, 1.1s, 1s;
      -moz-transition-timing-function: ease-out, ease-in-out, linear;
      -moz-transition-delay: 300ms, 900ms, 2500ms;
      -webkit-transition-property: width, height, background-color;
      -webkit-transition-duration: 0.3s, 1.1s, 1s;
      -webkit-transition-timing-function: ease-out, ease-in-out, linear;
      -webkit-transition-delay: 300ms, 900ms, 2500ms; 
}
.timingfunctiontransformdelay-1a:hover  {
      width: 400px;
      height: 300px;
      background: #009900;
}
</style>

xHTML (Example-1a)

<div class="timingfunctiontransformdelay-1a"><p style="text-align:center;color: white; padding: 10px; font-size: 22px;">gubhug reyot<br /><br />Place mouse over here!</p>
</div>

CSS Code (Example-1b)

<style type="text/css">
.timingfunctiontransformdelay-1b {
      margin: 20px auto;
      width: 300px;
      height: 110px;
      background: red;
      -o-transition: width 0.3s ease-out 0.3s, height 1.1s ease-in-out 0.9s, background-color 1s linear 2.5s;
      -moz-transition: width 0.3s ease-out 0.3s, height 1.1s ease-in-out 0.9s, background 1s linear 2.5s;
      -webkit-transition: width 0.3s ease-out 0.3s, height 1.1s ease-in-out 0.9s, background 1s linear 2.5s;
}
.timingfunctiontransformdelay-1b:hover  {
      width: 400px;
      height: 300px;
      background: #009900;
}
</style>

xHTML (Example-1b)

<div class="timingfunctiontransformdelay-1b"><p style="text-align:center;color: white; padding: 10px; font-size: 22px;">gubhug reyot<br /><br />Place mouse over here!</p>
</div>

Example-2

CSS3 will create a change in size (animated) width, height, background-color and opacity when the mouse over the box.

transition-propery: width, height, background, opacity;

gubhug reyot
Place mouse over here!

CSS Code (Example-2)

<style type="text/css">
.timingfunctiontransformdelay-2 {
      margin: 20px auto;
      width: 300px;
      height: 110px;
      opacity: 0.4;
      background: #FF00FF; 
      border: 2px solid blue;
      border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -o-transition: width 1s ease-out 0.6s, height 1s ease-in-out 1.8s, background-color 1s linear 2s, opacity 2s ease-in-out 4s;
      -moz-transition: width 1s ease-out 0.6s, height 1s ease-in-out 1.8s, background 1s linear 2s, opacity 2s ease-in-out 4s;
      -webkit-transition: width 1s ease-out 0.6s, height 1s ease-in-out 1.8s, background 1s linear 2s, opacity 2s ease-in-out 4s;
}
.timingfunctiontransformdelay-2:hover  {
      width: 400px;
      height: 300px;
      background: #009900;
      opacity: 1.0;
      background: #FF6600;
      -o-transition: background-color 1s linear 0.4s, height 0.3s ease 1.8s, width 2s ease-out 3s, opacity 2s ease-in 5s;
      -moz-transition: background-color 1s linear 0.4s, height 0.3s ease 1.8s, width 2s ease-out 3s, opacity 2s ease-in 5s;
      -webkit-transition: background-color 1s linear 0.4s, height 0.3s 1.8s, width 2s ease-out 3s, opacity 2s ease-in 5s;  
}
</style>

xHTML (Example-2)

<div class="timingfunctiontransformdelay-2"><p style="text-align:center;color: white; padding: 10px; font-size: 22px;">gubhug reyot<br />Place mouse over here!</p>
</div>

Example-3a and Example-3b has the same functionality but use different models of writing code.

This example uses multiple transition.

transition-property: width, height, opacity, background-color, border, border-radius and transform;

Example-3a

gubhug reyot

Place mouse over here!

CSS Code (Example-3a)

<style type="text/css">
.transitiontransformdelay-1 {
      width: 100px;
      height: 100px;
      opacity: 0.5;
      box-shadow: 1px 1px 15px #000;
      -moz-box-shadow: 1px 1px 15px #000;
      -webkit-box-shadow: 1px 1px 15px #000;
      border: 2px solid black;
      background: red;
      margin: 100px auto;
      border-radius: 20px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      font: 14px Serif;
      font-weight: bold;
      text-shadow: 1px 1px 1px #000; 
      text-align: center;
      color: white;
      -o-transition-property: opacity, width, height, -o-transform, background-color;
      -o-transition-duration: 2s, 1.5s, 3s, 2s, 2s;
      -o-transition-delay:  0.5s, 1s, 2s, 3s, 5s; 
      -moz-transition-property: -moz-border-radius, border, opacity, width, height, -moz-transform, background;
      -moz-transition-duration: 2s, 1s, 2s, 1.5s, 3s, 2s, 2s;
      -moz-transition-delay: 300ms, 1s, 0.5s, 2s, 3s, 5s, 6s; 
      -webkit-transition-property: -webkit-border-radius, border, opacity, width, height, -webkit-transform, background;
      -webkit-transition-duration: 2s, 1s, 2s, 1.5s, 3s, 2s, 2s;
      -webkit-transition-delay: 300ms, 1s, 0.5s, 2s, 3s, 5s, 6s;  
}
.transitiontransformdelay-1 p {
      opacity: 0;
      font: 8px Times;
      color: orange;
      text-shadow: -2px -2px 2px #000, 2px 2px 2px #000, 4px 4px 7px #eee;
      -o-transition: 1s ease-in 0.3s;
      -moz-transition: 2s ease-in 1s;
      -webkit-transition: 2s ease-in 1s;
      text-align: center;
} 
.transitiontransformdelay-1:hover {
      width: 300px;
      height: 200px;
      border: 20px solid green;
      background: blue;
      opacity: 1.0;
      border-radius: 60px;
      -moz-border-radius: 60px;
      -webkit-border-radius: 60px; 
      -o-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
      -moz-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
      -webkit-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
}
.transitiontransformdelay-1:hover p {
      opacity: 1.0;
      font-size: 50px;
      font-weight: bold;
      color: yellow;
      -o-transition: all 2s ease-in 5s;
      -moz-transition: all 2s ease-in 7s;
      -webkit-transition: all 2s ease-in 7s; 
}
</style>

xHTML (Example-3a)

<div class="transitiontransformdelay-1"><p>gubhug reyot</p>Place mouse over here!</div>

Example-3b

gubhug reyot

Place mouse over here!

CSS Code (Example-3b)

<style type="text/css">
.transitiontransformdelay-2 {
      width: 100px;
      height: 100px;
      opacity: 0.5;
      box-shadow: 1px 1px 15px #000;
      -moz-box-shadow: 1px 1px 15px #000;
      -webkit-box-shadow: 1px 1px 15px #000;
      border: 2px solid black;
      background: red;
      margin: 100px auto;
      border-radius: 20px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      font: 14px Serif;
      font-weight: bold;
      text-shadow: 1px 1px 1px #000; 
      text-align: center;
      color: white;
      -o-transition:  opacity 2s 0.5s, width 1.5s 1s, height 3s 2s, -o-transform 2s 3s, background-color 2s 5s;
      -moz-transition: -moz-border-radius 2s 0.3s, border 1s 1s, opacity 2s 0.5s, width 1.5s 2s, height 3s 3s, -moz-transform 2s 5s, background 2s 6s;
      -webkit-transition: -webkit-border-radius 2s 0.3s, border 1s 1s, opacity 2s 0.5s, width 1.5s 2s, height 3s 3s, -webkit-transform 2s 5s, background 2s 6s;
}
.transitiontransformdelay-2 p {
      opacity: 0;
      font: 8px Times;
      color: orange;
      text-shadow: -2px -2px 2px #000, 2px 2px 2px #000, 4px 4px 7px #eee;
      -o-transition: 1s ease-in 0.3s;
      -moz-transition: 2s ease-in 1s;
      -webkit-transition: 2s ease-in 1s;
      text-align: center;
} 
.transitiontransformdelay-2:hover {
      width: 300px;
      height: 200px;
      border: 20px solid green;
      background: blue;
      opacity: 1.0;
      border-radius: 60px;
      -moz-border-radius: 60px;
      -webkit-border-radius: 60px; 
      -o-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
      -moz-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
      -webkit-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
}
.transitiontransformdelay-2:hover p {
      opacity: 1.0;
      font-size: 50px;
      font-weight: bold;
      color: yellow;
      -o-transition: all 2s ease-in 5s;
      -moz-transition: all 2s ease-in 7s;
      -webkit-transition: all 2s ease-in 7s; 
}
</style>

xHTML (Example-3b)

<div class="transitiontransformdelay-2"><p>gubhug reyot</p>Place mouse over here!</div>

Example-4

gubhug reyot

Place mouse over here!

CSS Code (Example-4)

<style type="text/css">
.wadahe { 
      height: 298px; 
      width: 445px; 
      border: 2px solid #555; 
      margin: 20px auto;
      }
.wadahe .transitiontransformdelay-3 {
      width: 100px;
      height: 150px;
      background: #000;
      opacity: 0.6;
      margin: 100px auto;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -o-transform: scale(1) rotate(-20deg) translate(0px, 0px);
      -moz-transform: scale(1) rotate(-20deg) translate(0px, 0px);
      -webkit-transform: scale(1) rotate(-20deg) translate(0px, 0px);
      -o-transition: background-color 2s ease 4s, opacity 2s ease-in 1s, -o-transform 3s ease-out 1.5s, color 2s linear 5s;
      -moz-transition: background 2s ease 4s, opacity 3s ease-in 2s, -moz-transform 3s ease-out 1.5s, color 2s linear 6s;
      -webkit-transition: background 2s ease 4s, opacity 3s ease-in 2s, -webkit-transform 3s ease-out 1.5s, color 2s linear 6s;
      font: 14px Times New Roman;
      font-weight: bold;
      color: green;
      text-shadow: 3px 3px 7px #999;
      text-align: center;
}
.transitiontransformdelay-3 p{
      opacity: 0;
      font: 8px Times;
      color: orange;
      text-shadow: -2px -2px 2px #000, 2px 2px 2px #000, 4px 4px 7px #eee;
      -o-transition: 1s ease-in 0.3s;
      -moz-transition: 2s ease-in 1s;
      -webkit-transition: 2s ease-in 1s;
      text-align: center;
}
.wadahe:hover .transitiontransformdelay-3 {
      background: blue;
      opacity: 1.0;
      -o-transform: scale(4.5, 2) rotate(1440deg) translate(0px, -13px);
      -moz-transform: scale(4.5, 2) rotate(1440deg) translate(0px, -13px);
      -webkit-transform: scale(4.5, 2) rotate(1440deg) translate(0px, -13px);
      color: #CCFF00;    
}
.wadahe .transitiontransformdelay-3 p img {
      height: 10px; 
      width: 10px;
}
.wadahe:hover .transitiontransformdelay-3 p img {
      height: 90px; 
      width: 30px;
}
.transitiontransformdelay-3:hover p {
      opacity: 1.0;
      font-weight: bold;
      color: yellow;
      -o-transition: all 2s ease-in 5s;
      -moz-transition: all 2s ease-in 5s;
      -webkit-transition: all 2s ease-in 5s; 
}
</style>

xHTML (Example-4)

<div class="wadahe">
<div class="transitiontransformdelay-3"><p>gubhug reyot<br /><img style="display:block;text-align:center;margin:0 auto;" src="http://img.theomegaproject.org/thumbs/2010/07/281.jpg" /></p>Place mouse over here!</div>
</div>

Click the link below to open the tutorial!

Tutorial CSS3 Transition

Original tutorial by gubhug reyot

You can see other best tutorial below ...

Please open the links below to read the others bloggers tutorial who can complete the tutorials and demos on this blog.

Thank you for your visit!

Greeting

bgsGR Tutorial

si gubhug reyot

si gubhug reyot

Search Box

Flag Counter

Flag Counter

Popular Posts

jQuery Floating Menu

JQuery Transparent Floating Menu

Arsip...

Slide Box Kiri Lingkaran Sentuh

Menu 1

Menu 2

Menu 3

Menu 4

jQuery-CSS3 Animated Tag Cloud

Histats Counters

Categories

CSS nggolekisearchporm

var ultimaFecha = 'Rabu, 22 September 2010'; remplaza_fecha('Rabu, 22 September 2010');

DEMO - How to Use CSS3 Transition Delay, Transition Property, Transition Duration and Transition Timing Function

Example-1a and Example-1b has the same functionality but use different models of writing code.

Example-1a

Example-1b

CSS Code (Example-1a)

xHTML (Example-1a)

CSS Code (Example-1b)

xHTML (Example-1b)

Example-2

CSS Code (Example-2)

xHTML (Example-2)

Example-3a and Example-3b has the same functionality but use different models of writing code.

Example-3a

CSS Code (Example-3a)

xHTML (Example-3a)

Example-3b

CSS Code (Example-3b)

xHTML (Example-3b)

Example-4

CSS Code (Example-4)

xHTML (Example-4)

You can see other best tutorial below ...

Recent Posts Using jQuery-CSS3

Related Post

Tutorial Blogger

Tips - Trik Blogger

Buat perjaka yang masih Jomblo

Berita Terbaru Sehangat Tahi Ayam