如何延迟一个过渡而不是另一个？答案

【问题标题】：How to delay one transition but not the other?如何延迟一个过渡而不是另一个？
【发布时间】：2017-01-04 03:03:28
【问题描述】：

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

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

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

解决方案

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

而不是这个：

transition: transform 2s, opacity .1s;

使用这个：

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

说明

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

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

如果transition-property 组件被省略，速记属性将应用all。

如果transition-timing-function 组件被省略，则简写应用ease。

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

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

<transition-duration> <transition-delay>

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

所以有了这个：

transition: transform 2s, opacity .1s;

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

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

根据您的问题：

我只希望不透明度有延迟，但我只能在两个过渡都发生的地方做到这一点。

然后改为这样做：

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

revised fiddle

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

【讨论】：