转换函数及其操作顺序

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，请编写如下内容：

#obj-1 {
    // some styling
}

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

浏览器会如何解释这个 CSS？我最初的想法是它会为每个“功能”（3）分配一个分配的时间（6s/3fun = 2 sec per fun）。它不是那样工作的，所以我想知道是否有人会指出是什么决定了每个函数将运行多长时间，或者它们是否在执行前以某种方式被改变。

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) 作为变换。

注意：如果任何比例包含 0，则 scale(0) 将生效

但除了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