转换函数及其操作顺序

Question

我正在尝试了解转换属性如何与操作顺序一起工作及其与转换持续时间的相关性。

说我有一些 html

<div class="container">
  <ul>
    <li id="obj-1"><a href="#">Item 1</a></li>
    <li id="obj-2"><a href="#">Item 2</a></li>
  </ul>
</div>

container 的相关 css 将是：

transition: all 6s ease 0s;

现在如果我想转换 #obj-1，id 会这样写：

#obj-1 {
    // some styling
}

#obj-1:hover {
    transform: scale(10) scale(2) scale(0.05); 
}

浏览器将如何解释此 css？我最初的想法是它会为每个 "function" (3) 分配一个分配的时间量（6s/3fun = 2 秒每个乐趣）。它不是那样工作的，所以我想知道是否有人会指出是什么决定了每个函数的持续时间运行，或者它们是否在执行前以某种方式被改变了。

Answer 1

您为动画分配的时间实际上取决于 transition-timing-function。在这里，您将 ease 作为转换计时函数。 ease不平均分配时间。

如果你想平均分配你的时间，你必须使用transition-timing-function: linear。

查看下面的示例，您将看到不同之处。

More help on Transition CSS

.main div {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 8px;
}

.main:hover div {
  transform: translateX(200px);
}

.one {
  transition: all 1s ease;
}

.two {
  transition: all 1s linear;
}

.three {
  transition: all 1s ease-in;
}

<div class="main">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

以及您对 transform: scale(10) scale(2) scale(0.05);

的回答

它将采用最高比例值，即 10，因此您的元素将采用 scale(10) 作为变换。

Note: If any scale contain 0 then scale(0) will take effect

但除 scale() 外，所有变换值 translate、rotate 的工作方式都不同。

translateX(100px) translateX(100px) translateX(100px) 将导致 translateX(300px)

rotate(45deg) rotate(45deg) 将导致 rotate(90deg)

参见下面的示例

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 0 auto 8px;
  transition: all 1s linear;
}

div.one:hover {
  transform: rotate(45deg) rotate(45deg);
}

div.two:hover {
  transform: translateX(100px) translateX(100px);
}

div.three:hover {
  transform: scale(2) scale(1);
}

div.four:hover {
  transform: scale(0) scale(2);
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

如果你想运行转换这些值，我更喜欢使用

@keyframes CSS

转换函数及其操作顺序

transition functions and their order of operation

css

transform

css-transforms