如何延迟一次过渡而不是另一次？

Question

我有两个过渡设置#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/

任何帮助将不胜感激,谢谢!

Answer 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;

修改过的小提琴

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