Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

CSS 3

Learn step by step



CSS3 Transitions

No transition 
1 second transition

<style>
.p1 pre{
border:1px gray solid;
background:red;
width:50px;
height:50px;
border-radius:100px;
margin:20px;
padding:30px;
list-style:none;
text-align:center;
}
.p1 pre#transition{
-webkit-transition-property: background, width;
-moz-transition-property: background, width;
-o-transition-property: background;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
.p1 pre:target, pre:hover{
background:blue;
width:600px;
}
</style>
<div class="p1">
<pre id="no_transition">No transition </pre>
<pre id="transition">1 second transition</pre>
</div>

A CSS3 Transition Effect is a such an effects that let an element gradually change from one style to another style. CSS3 Transition Effect is best suit 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 measure browser support the CSS3 Transition Effects. Although CSS3 Transition Effect is sufficient for transition of an element, but a text-transform property can enhance the style of CSS3 Transition Effects. Their are mainly four properties of CSS3 Transition Effects, which has been described as follows:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
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 customized cubic process.

Dransition-Delay

Where transition-delay is used to determine the time duration between transition start and it finishing. Negative value are also acceptable in transition- delay.

That div will take half a second when the mouse is over it to turn from pink to blue.

<style>
.box {
width: 150px;
height: 150px;
background: pink;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: blue;
cursor: pointer;
</style>
<div class="box"></div>
Hover me for transition effect.


<style>
.ab
{
width:100px;
height:100px;
background:blue;
border-radius:20px;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s;
transition:width 2s, height 2s, transform 2s;
}
.ab:hover
{
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
background:pink;
}
</style>
<body>
<div class="ab"></div>
CSS3 Transition Properties

The following table lists all the transition properties:

Property Description CSS
transition A shorthand property for setting the four transition properties into a single property 3
transition-delay Specifies when the transition effect will start 3
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
transition-property Specifies the name of the CSS property the transition effect is for 3
transition-timing-function Specifies the speed curve of the transition effect 3


Related Videos