How to delay one transition but not the other? - html

Question

I have two transitions set for #circle.
I want only the opacity to have a delay, but I can only make it where both of the transitions do.
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;
}
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/
Any help would be appreciated, thanks!

Answer 1

Solution
The transition-delay function can only be parsed as the second timing value.
Instead of this:
transition: transform 2s, opacity .1s;
Work with this:
transition: transform 2s 0s, opacity 0s 2s;
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>
If the transition-property component is left out, the shorthand property applies all.
If the transition-timing-function component is left out, the shorthand applies ease.
(Both are the initial values of the respective properties.)
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.
So with this:
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.
Per your question:
I want only the opacity to have a delay but I can only make it where both of the transitions do.
Then do this instead:
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>