CSS Transition
The CSS transitions are effects that are added to change the element gradually from one style to another, without using flash or JavaScript.
Transition property
| Property | Descriptiom |
|---|---|
| transition-property | This property specifies which CSS properties should be transitioned. |
| transition-duration | This property specifies the duration of the transition in seconds or milliseconds. ... |
| transition-timing-function | This property controls the speed and timing of the transition. |
| transition-delay | This property specifies a delay before the transition starts. |
Note: If you don't specify the duration part, the transition will have no effect because its default value is 0. The transition effect is started when you move cursor over an element.
<html><head>
<title>CSS</title>
<style>
.trans
{
width: 100px;
height: 100px;
background: orange;
transition: width 1s;
}
.trans:hover
{
width: 300px;
}
</style>
</head>
<body>
<div class="trans" >
</div>
<p>Move the cursor over the div element above, to see the transition effect.</p>
</body>
</html>
output
Move the cursor over the div element above, to see the transition effect.
Specify the Speed Curve of the Transition
The transition-timing-function property can have the following values:
- ease- specifies a transition effect with a slow start, then fast, then end slowly (this is default)
- linear- specifies a transition effect with the same speed from start to end
- ease-in specifies a transition effect with a slow start
- ease-out specifies a transition effect with a slow end
- ease-in-out- specifies a transition effect with a slow start and end
- cubic-bezier(n,n,n,n)- lets you define your own values in a cubic-bezier function
Transition-timing-function
<html><head>
<title>CSS</title>
<style>
#div1
{
width: 100px;
height: 100px;
background: orange;
transition: width 1s;
}
#div1:hover
{
transition-timing-function: linear;
width: 300px;
}
#div2
{
width: 100px;
height: 100px;
background: orange;
transition: width 1s;
}
#div2:hover
{
transition-timing-function: ease;
width: 300px;
}
#div3
{
width: 100px;
height: 100px;
background: orange;
transition: width 1s;
}
#div3:hover
{
transition-timing-function: ease-in;
width: 300px;
}
#div4
{
width: 100px;
height: 100px;
background: orange;
transition: width 1s;
}
#div4:hover
{
transition-timing-function:ease-out;
width: 300px;
}
#div5
{
width: 100px;
height: 100px;
background: orange;
transition: width 1s;
}
#div5:hover
{
transition-timing-function:ease-in-out;
width: 300px;
}
</style>
</head>
<body>
<div id="div1">liner </div> <br>
<div id="div2">ease </div> <br>
<div id="div3">ease-in </div> <br>
<div id="div4">ease-out </div> <br>
<div id="div5">ease-in-out </div> <br>
<p>Move the cursor over the div element above, to see the transition effect.</p>
</body>
</html>
liner
ease
ease-in
ease-out
ease-in-out
Move the cursor over the div element above, to see the transition effect.
Transition delay property
<html><head>
<title>CSS</title>
<style>
.trans2
{
width: 100px;
height: 100px;
background: orange;
transition-property: width;
transition-duration:2s;
transition-timing-function: linear;
transition-delay: 1s;
}
.trans2:hover
{
width: 300px;
}
</style>
</head>
<body>
<div class="trans2" >
</div>
<p>Move the cursor over the div element above, to see the transition effect.</p>
</body>
</html>
output
Move the cursor over the div element above, to see the transition effect.