css3 element Speed by transition
Now we are
using some timing function in transition. Transition has 5 timing functions
these are-
ease – by this method slow, then fast, then end with fast. It is
default Transition of css3
linear – by this method same speed from start to end
ease-in - by this method in starting
speed look slow and end with fast
ease-out - by this method speed look fast and at the end its slow
ease-in-out- by this method same speed from start to end
Example
Go to this link and check out the live example of below codding .
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background:#FFCC00;
transition: width 1s;
color:white;
font-size:24px;
text-align:center;
border-radius:20px;
padding-top:50px;
}
#div1
{transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4
{transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}
div:hover {
width: 300px;
background-color:yellow;
color:#FF6600;
}
</style>
</head>
<body>
<div
id="div1">its Linear Effect</div><br>
<div
id="div2">its Ease Effect</div><br>
<div
id="div3">its Ease-in Effect</div><br>
<div
id="div4">its Ease-out Effect</div><br>
<div
id="div5">its Ease-in-out Effect</div><br>
</body>
</html>
Thanks
Emraan Ali
Thanks
Emraan Ali
Comments
Post a Comment