<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerDiv{
width: 100%;
height: 150px;
border: 1px solid #267326;
padding: 10px;
margin-bottom: 25px;
display: flex;
position: relative;
text-align: center;
}
#innerDiv{
width: 80px;
height: 80px;
background-color: teal;
color: #fff;
line-height: 4;
border: 1px solid #004d4d;
position: absolute;
top: 5%;
left: 1%;
transition: left 1s;
-webkit-transition: left 1s
}
#outerDiv:hover > #innerDiv{
left: 85%;
}
</style>
</head>
<body>
<h1>CSS transition-timing-function Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="innerDiv">Div</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("innerDiv");
function myFunction(){
x.style.transitionTimingFunction = "cubic-bezier(0.83, 2.3, 0.31, 0.46)";
x.style.WebkitTransitionTimingFunction = "cubic-bezier(0.83, 2.3, 0.31, 0.46)";
}
</script>
<p><strong>Note</strong>: Click on the button to set custom 'transition-timing-function' using cubic-bezier.</p> </body>
</html>