如何延迟一个转换而不延迟另一个转换？

我设置了两个转换#circle.

我只希望不透明度有延迟，但我只能在两个过渡都进行的地方进行延迟。

我的全部目标是在圆圈处于中间旋转时（即正好 90 度）改变不透明度。

但我会自己计算时间，我只想知道如何仅延迟一次转换.

#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/

任何帮助将不胜感激，谢谢！

Solution

The transition-delay函数只能被解析为第二个计时值。

而不是这个：

transition: transform 2s, opacity .1s;

与此合作：

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

解释

当与transition简写属性、组件的顺序和存在很重要。这是基本顺序和组成：

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

If the transition-property组件被省略，速记属性适用all.

If the transition-timing-function组件被省略，速记适用ease.

（两者都是各自属性的初始值。）

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

<transition-duration> <transition-delay>

如果只声明了一个值（就像在您的代码中一样），它将始终应用于transition-duration.

所以这样：

transition: transform 2s, opacity .1s;

...您正在对这两个属性应用计时持续时间。

The transition-delay函数只能被解析为第二个计时值。

根据你的问题：

我只希望不透明度有延迟，但我只能在两个过渡的地方进行延迟。

然后这样做：

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>