With reference of previous chapter now you may have familiarity with CSS3 Text Effects. In this chapter we will learn about the CSS3 Transition Effect, Which is one of the most powerful weapons of CSS3.
CSS3 Transition Effects
A CSS3 Transition Effect is a such an effect that lets an element gradually change from one style to another style. CSS3 Transition Effect is best suited for animation uses. But still a lot can be done without using the animation. A user interface is necessary to see the effects of transition. The all major browser support the CSS3 Transition Effects.
Although CSS3 Transition Effect is sufficient for the transition of an element, but a text-transform property can enhance the style of CSS3 Transition Effects.
There are mainly four properties of CSS3 Transition Effects, which has been described as follows:
✔ transition-property
✔ transition-duration
✔ transition-timing-function
✔ transition-delay
CSS3
CSS3
CSS3
CSS3
transition-property
Where transition-property is used to define about the css3 properties, on which the properties should be applied or not. The following Syntax can be found can be used to define the property.
transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color, height, width;
transition-duration
Where transition-duration is used to define the time of corresponding transitions to take effect. The time can be set in seconds/milliseconds.
transition-duration: 2s;
transition-duration: 1000ms;
transition-duration: 1000ms, 2000ms;
transition-timing-function
Where transition-timing-function is used to define the style of transition take effect over its transition-duration. This can be done using the predefined function or can be done using a customized cubic process.
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-in-out;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(1.000, 0.835, 0.000, 0.945);
transition-delay
Where transition-delay is used to determine the time duration between transition start and it finishing. Negative values are also acceptable in transition-delay.
transition-delay: 2s;
transition-delay: 1000ms, 2000ms;
transition-delay: -2s;
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
div.swapnil
{
width: 20px;
height: 20px;
margin: 20px auto;
}
div.swapnil div.raja img
{
width: 20px;
height: 20px;
color: #fff;
padding: 10px;
border-radius: 5px;
margin-left: 0;
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
div.swapnil:hover div.raja img
{
width: 240px;
height: 220px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
</head>
<body>
<p>Hover on object to see it in action</p>
<div class="swapnil">
<div class="raja">
<img src="media/star.png" width="20" height="20"/>
</div>
</div>
</body>
</html>
Supported Browser
Below is the another complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#example
{
position:relative;
width:530px;
height:530px;
margin:0 auto 10px;
padding:10px;
}
.childbox
{
font-size:12px;
position:relative;
width:60px;
height:60px;
margin-bottom:10px;
background-color:#ccc;
}
.childbox p
{
text-align:center;
padding-top:10px;
}
#ease.childbox
{
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
border:1px solid #ff0000;
}
#ease_in.childbox
{
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
transition: all 4s ease-in;
border:1px solid #00ffff;
}
#ease_out.childbox
{
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
border:1px solid #f5f5f5;
}
#ease_in_out.childbox
{
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
border:1px solid #f209f3;
}
#linear.childbox
{
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
border:1px solid #ddddff;
}
#custom.childbox
{
-webkit-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-moz-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-o-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
border:1px solid #cfdf44;
}
#negative.childbox
{
-webkit-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
-moz-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
-o-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
border:1px solid #000;
}
#example:hover .childbox, #example.hover_effect .childbox
{
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
margin-left:420px;
background-color:#fff;
}
</style>
</head>
<body>
<p>Hover on object to see it in action</p>
<div id="example">
<div id="ease" class="childbox"><p>CSS3</p></div>
<div id="ease_in" class="childbox"><p>CSS3</p></div>
<div id="ease_out" class="childbox"><p>CSS3</p></div>
<div id="ease_in_out" class="childbox"><p>CSS3</p></div>
<div id="linear" class="childbox"><p>CSS3</p></div>
<div id="custom" class="childbox"><p>CSS3</p></div>
<div id="negative" class="childbox"><p>CSS3</p></div>
</div>
</body>
</html>