转换函数及其运算顺序

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/3FY=2秒每乐趣)。它不是这样工作的，所以我想知道是否有人会指出是什么决定了每个函数运行多长时间，或者它们是否在执行之前被修改过。

Answer 1

您为动画分配的时间实际上取决于transition-timing-function.在这里，您已经给出了ease作为一个转换时间函数。ease并不平均分配时间。

如果您希望您的时间平均分配，则必须使用transition-timing-function: linear。

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

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

​

.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，则刻度(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>

​

如果您想运行这些transfomm值，那么我更愿意使用

https://developer.mozilla.org/en-US/docs/Web/CSS/%40keyframes