CSS Transition Timing Function and Animation Name

Question

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>

score 0 · Accepted Answer · answered May 27 '20 at 05:02

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>

CSS Transition Timing Function and Animation Name

1 Answers1