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？我最初的想法是它将分配每个＆＃34;功能＆＃34; （3）分配的时间量（6s / 3fun =每个乐趣2秒）。它没有那样工作所以我想知道是否有人可能指出它是什么决定每个函数运行多长时间或者它们是否在执行前以某种方式被改变。

Answer 1

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

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

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

More help on Transition CSS

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您对 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)

参见下面的示例

＆＃13;

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);
}

＆＃13;

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

＆＃13;

如果你想按顺序运行这些transfomm值，我宁愿使用

<强> @keyframes CSS

过渡功能及其操作顺序

1 个答案: