如何延迟一个过渡但不延迟另一个过渡？ [英] How to delay one transition but not the other?

问题描述

我为 #circle 设置了两个过渡。

我只希望不透明

我的全部目标是在圆处于中间旋转时使不透明度发生变化（因此正好在90度）。

My full goal is to make the opacity change when the circle is mid spin (so at exactly 90deg).

但是我自己会计算出时间，我只想知道如何将延迟仅用于一次过渡

But I will work out the timing myself, I just want to know how to give the delay to only one transition.

#circle {
  background-color:black;
  background-image:url('rain.img');
  height:300px;
  width:300px;
  border-radius:100%;
  margin:0 auto;
  perspective:1000;
  transition:transform 2s, opacity .1s;
}

#circle:hover {
  perspective:1000px;
  transform:rotateY(180deg);
  opacity:.25;
}

我想您只需要查看CSS，但是如果您认为需要查看完整代码 ===> https://jsfiddle.net/z49kd9qk /

I imagine you will only need to see the CSS, but if you think you need to see the full code go here ===> https://jsfiddle.net/z49kd9qk/

任何帮助将不胜感激！

推荐答案

解决方案

转换延迟函数只能解析为第二个计时值。

Solution

The transition-delay function can only be parsed as the second timing value.

取而代之的是：

transition: transform 2s, opacity .1s;

与此工作：

transition: transform 2s 0s, opacity 0s 2s;

---

说明

使用 transition 速记属性时，组件的顺序和存在很重要。基本顺序和组成如下：

---

Explanation

When working with the transition shorthand property, the order and presence of components matter. Here's the basic order and composition:

<transition-property> <transition-duration> <transition-timing-function> <transition-delay>

如果剩余转换属性组件则，简写属性适用于 all 。

If the transition-property component is left out, the shorthand property applies all.

如果 transition-timing-function-函数组件被省略，速记适用 ease 。

If the transition-timing-function component is left out, the shorthand applies ease.

（均为初始值

因此您可以将声明最小化：

So you can minimize the declaration to this:

<transition-duration> <transition-delay>

如果仅声明一个值（如您的代码中一样），它将始终应用于过渡时间。

If only one value is declared (like in your code), it will always be applied to transition-duration.

因此：

transition: transform 2s, opacity .1s;

...您要将计时持续时间应用于这两个属性。

... you're applying a timing duration to both properties.

转换延迟函数只能解析为第二个计时值。

The transition-delay function can only be parsed as the second timing value.

根据您的问题：

我只希望不透明性有延迟，但我只能将其设为

I want only the opacity to have a delay but I can only make it where both of the transitions do.

然后执行以下操作：

transition: transform 2s 0s, opacity 0s 2s;

修订的小提琴

#circle {
  background-color: black;
  background-image: url('https://media.giphy.com/media/eNMHeFodYv8Os/giphy.gif');
  height: 300px;
  width: 300px;
  border-radius: 100%;
  margin: 0 auto;
  perspective: 1000;
  /* transition:transform 2s, opacity .1s; */
  transition: transform 2s 0s, opacity 0s 2s;
}
#circle:hover {
  perspective: 1000px;
  transform: rotateY(180deg);
  opacity: .25;
}
#cloud {
  height: 70px;
  padding: 10px;
  position: relative;
  left: 10%;
  top: 105px;
}
#temp {
  font-family: 'Slabo 27px', serif;
  position: relative;
  left: 45%;
  font-size: 100px;
  bottom: 100px;
  color: white;
}

<div id='circle'>
  <img src='http://www.freeiconspng.com/uploads/rain-cloud-icon-5.png' id='cloud'>
  <h2 id='temp'>54°</h2>
</div>

这篇关于如何延迟一个过渡但不延迟另一个过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！