我为 #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,但是如果您认为需要查看完整代码 ===> jsfiddle/z49kd9qk /
I imagine you will only need to see the CSS, but if you think you need to see the full code go here ===> jsfiddle/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('media.giphy/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='www.freeiconspng/uploads/rain-cloud-icon-5.png' id='cloud'> <h2 id='temp'>54°</h2> </div>
更多推荐
如何延迟一个过渡但不延迟另一个过渡?
发布评论