Transition properties
Transition properties
Here we describe about transition properties which gives
smoothness to our box, imagae or text.
The transition-timing-function property can have the
following values:
1. ease - specifies a transition effect with a slow start,
then fast, then end slowly 2. linear - specifies a transition effect with the
same speed from start to end
3. ease-in - specifies a transition effect with a slow start
4. ease-out - specifies a transition effect with a slow end
5. ease-in-out - specifies a transition effect with a slow
start and end
6. cubic-bezier(n,n,n,n) - lets you define your own values in
a cubic-bezier function
Let's have an example:-
<!DOCTYPE html>
<html>
<head>
<style>
.a
{
width: 100px;
height: 100px;
background: green;
transition: width 2s;
}
.a
{
transition-timing-function:
linear;
}
.a
{
transition-timing-function:
ease;
}
.a
{
transition-timing-function:
ease-in;
}
.a
{
transition-timing-function:
ease-out;
}
.a
{
transition-timing-function:
ease-in-out;
}
.a:hover
{
width: 300px;
}
</style>
</head>
<body>
<div class="a"><center>linear
Transitions</center></div><br>
<div class="a"><center>ease</center></div><br>
<div class="a"><center>ease-in</center></div><br>
<div class="a"><center>ease-out</center></div><br>
<div class="a"><center>ease-in-out</center></div><br>
</body>
</html>
Comments
Post a Comment