CSS transition ease in 和 ease out 不同的值

Question

我想申请 CSS 在悬停时缓入和缓出过渡不同的值。

像这样，

ease-in: 180ms,
ease-out: 240ms

悬停时缓入 180 毫秒，悬停时缓出 240 毫秒。

Answer 1

您可以为影响元素的样式使用不同的 transition-duration 值，例如：

div {
  width: 150px;
  height: 150px;
  background-color: gray;
  transition: width 180ms ease-in;
}

div:hover {
  width: 300px;
  transition-duration: 240ms;
  transition-timing-function: ease-out;
}

<div>My Element</div>

更多详情请查看CSS Transitions

CSS transition ease in 和 ease out 不同的值

CSS transition ease in and ease out different value

css

css-transitions