I want to add transition-timing-function with Bezier curve once page loads. I have a code and it works fine on hover but I want the same effect automatically. So I used Animation Name. But the Bezier Curve effect does not seem to work. It is working perfectly fine on hover though.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width .6s;
transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
animation: mymove .6s;
}
@keyframes mymove {
from {
transform: translate(0px, 400px);
}
to {
transform: translate(0px, 0px);
}
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Transition and animation are different property in css. Animation has its own timing function. More information can be referred to w3school.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width .6s;
transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
animation: mymove 2s;
animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}
@keyframes mymove {
from {
transform: translate(0px, 400px);
}
to {
transform: translate(0px, 0px);
}
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>