<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerDiv{
width: 100%;
border: 1px solid #267326;
padding: 10px;
margin-bottom: 50px;
text-align: center;
display: flex;
flex-direction:column;
position: relative;
}
#outerDiv > div{
position:relative;
margin:10px;
height:95px;
background-color: teal;
width:95px;
color: #fff;
line-height:5;
border:1px solid #004d4d;
left:1%;
-webkit-transition-property: left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-property: left;
transition-duration: 2s;
}
#outerDiv:hover > div{
left: 80%;
}
#point{
transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari */
}
#point1{
transition-timing-function: ease;
-webkit-transition-timing-function: ease; /* Safari */
}
#point2{
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in; /* Safari */
}
#point3{
transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out; /* Safari */
}
#point4{
transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; /* Safari */
}
#point5{
transition-timing-function: steps(2, jump-both);
-webkit-transition-timing-function: steps(2, jump-both); /* Safari */
}
#point6{
transition-timing-function: cubic-bezier(0.83, 2.3, 0.31, 0.46);
-webkit-transition-timing-function: cubic-bezier(0.83, 2.3, 0.31, 0.46); /* Safari */
}
</style>
</head>
<body>
<h1>CSS transition-timing-function Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="point">linear</div>
<div id="point1">ease</div>
<div id="point2">ease-in</div>
<div id="point3">ease-out</div>
<div id="point4">ease-in-out</div>
<div id="point5">Div</div>
<div id="point6">custom</div>
</div>
</body>
</html>