gubhug reyot
Energy Saving Mode using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright 2010 gubhugreyot.blogspot.com - All rights reserved

CSS nggolekisearchporm

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

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

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

Recent Posts Using jQuery-CSS3

 
GR | Edited by | gubhug reyot