问题描述
我为 #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,但是如果您认为需要查看完整代码 ===>
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.
根据您的问题:
然后执行以下操作:
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>
这篇关于如何延迟一个过渡但不延迟另一个过渡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!