css 一个属性上的多个转换？

Question

我在 CSS

中创建了一个形状

.a {
  transform: scale(1);
  border-radius:100%;
  width:100px;
  height:100px;
  background-color:#444;
  transition: all .5s;
}

悬停时，我将增加 0.5 秒以上的比例。

.a:hover {
  transform: scale(1.2);
}

如何设置延迟并return回到原来的比例？

谢谢

Answer 1

有转换教程： https://developer.mozilla.org/en-US/docs/Web/CSS/transition

并尝试一下：

transition: all 0.5s ease-out;

Answer 2

这就是您想要的效果吗？您可以将延迟属性用于翻译规则。

.a {
  border-radius: 100%;
  color: #333;
  font-weight: bold;
  font-size: 1.5em;
  padding: 2em;
  width: 100px;
  height: 100px;
  background-color: #e3e3e3;
  transform: scale(1);
  transition: all .5s 2s;
}

.a:hover {
  transform: scale(1.2);
  transition: all .5s 0s;
}

<p class="a">Hello World.</p>

css 一个 属性 上的多个转换？

css multiple transitions on one property?

css

transition

css 一个属性上的多个转换？