CSS 转场计时函数和动画名称

Question

我想在页面加载后添加带有贝塞尔曲线的过渡计时功能。我有一个代码，它在悬停时工作正常，但我想要自动获得相同的效果。所以我使用了动画名称。但是贝塞尔曲线效果好像不行。它在悬停时工作得很好。

<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>

Answer 1

css 中的过渡和动画不同属性。动画有自己的计时功能。更多信息可参考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 转场计时函数和动画名称

CSS Transition Timing Function and Animation Name

css

cubic-bezier