Trying to apply a transition on :hover with a different delay for the start and end of the event. CSS below changes the color over .25s after a .35s delay - I want to change the delay to 1.5s when the hover state ends... Any suggestions?
span {
transition:.25s linear .35s;
color:white
}
span:hover {
color:black
}
Sorted - needed to break the transition out into a comma-separated list for each transitioned element, then specify a different delay value. Easy really, in hindsight.
Related
So basically I have four div boxes, which appear when a class is added through javascript. They appear with a transition-delay so they don't arrive at the same time when the class is added. This is done through this code:
&.active {
#for $i from 1 through 4 {
&:nth-last-child(#{$i}n) {
transition-delay: #{($i * 0.07) - 0.07}s;
opacity: 1.0;
}
}
&:hover {
transform: scale(1.20);
transition: all 0.2s ease-out;
}
}
So when the .active class is added the divs goes from opacity: 0.0 to opacity: 1.0 with a transition-delay. This works as intended. However, when I do the hover effect this delay is also present on the individual divs. So the first hover is quick, and the rest is delayed etc.
I am not entirely sure how to fix this. Can I somehow "delete" the transition-delay after, or...?
It appears you want to prevent the delay effects just when the element is being hovered, what you can do is add :not(:hover) to your original selector that adds the transition-delay. Replace your original selector:
&:nth-last-child(#{$i}n)
with:
&:not(:hover):nth-last-child(#{$i}n)
This HTML element had a nice transition effect when it was clicked. However when I added another class with animation property, transition was lost. Look at the demo: http://codepen.io/kunokdev/pen/rewveJ
<div
class="main-menu-item zoom-in-entrance">
Test
</div>
Do animation and transition properties not stack?
#keyframes zoom-in-entrance
from
opacity: 0
-webkit-transform: scale3d(.3, .3, .3)
transform: scale3d(.3, .3, .3)
50%
opacity: 1
.zoom-in-entrance
-webkit-animation: zoom-in-entrance .25s forwards
animation: zoom-in-entrance .25s forwards
.main-menu-item
cursor: pointer
background: $white
transition: all .25s
&:active
+scale(0.95,0.95)
i, span
display: block
Animation from animation property only happens on page load and never again, however animation from transition happens only when an element is clicked.
How do I make them both work?
Both your animation and transition properties are trying to affect scale. This is because you have specified forwards as the animation fill mode.
Since your animation ends on the "default" state of the item, you can use none instead, and the animation will not hold the scale at 1.0, allowing the transition to take effect:
-webkit-animation: zoom-in-entrance .25s none
animation: zoom-in-entrance .25s none
(you can also just leave out none as it's the default fill mode)
Updated pen: http://codepen.io/anon/pen/XdgqNq
If you remove the forwards which persits the final state of the animation it works fine.
If you can use js, you could remove zoom-in-entrance class after animation is finished.
Callback when CSS3 transition finishes
Yesterday I got my problem solved about jquery, which didn't load correctly. Today I struggle with yet another problem: two transitions for one element. The first transition starts when the page has loaded: it fades in. This one actually works when I do not use my second transitions. My second transitions must start whenever someone hovers over the ul. The problem is that the hover transitions 'overwrites' the fade-in transition. My jsFiddle:
http://jsfiddle.net/2cpX6/6/
Thanks in advance.
CSS rules with the same name override each other, just like any other rule.
Try this:
transition: opacity 2s ease-in, color 0.3s ease-in-out;
Note that you only need transition and -webkit-transition, since Firefox and Opera now fully support the unprefixed version, and -ms-transition never existed.
You can't put the same CSS rule for the same ruleset without it being overwritten. This applies to everything. For example, if you had:
span {
color: red;
color: green;
}
The spans would be green. This means that you cannot stack transition rules for the same ruleset.
You can create multiple separate transition rules using a comma.
transition: opacity 2s ease-in, color .3s ease-in-out;
http://jsfiddle.net/ExplosionPIlls/2cpX6/7/
The CSS transition property lets you animate on both hover-in & hover-out if you put the transition as below:
#inner{
opacity:0;
transition:opacity 2000ms;
}
#outer:hover #inner{
opacity:1;
}
However, if the transition is moved to :hover state, it only happens on hover-in.
#inner{
opacity:0;
}
#outer:hover #inner{
opacity:1;
transition:opacity 2000ms;
}
Is it possible to do the reverse, i.e. animate on hover-out only?
Here's one way to achieve this (put a bogus property none for transition property in :hover):
#inner2{
opacity:0;
transition:opacity 2000ms;
}
#outer:hover #inner2{
opacity:1;
transition:none;
}
http://jsfiddle.net/j716sbav/4/
Answer updated to incorporate #BoltClock's suggestion. Putting none instead of a bogus property is definitely more elegant.
If you prefer not to specify the transition property more than once, you can apply the transition to :not(:hover), but the caveat is that you need to swap all of the other declarations as well:
#inner2{
opacity:1;
}
#outer:not(:hover) #inner2{
opacity:0;
transition:opacity 2000ms;
}
Either of these will work, but if you don't want to deal with confusing inversions, stick with overriding via transition: none.
Also note that CSS selectors represent states and not events, which means that it utilizes a :hover state rather than mouseover and mouseout events; however, a transition from :hover to :not(:hover) is essentially the CSS way of expressing a mouseout animation.
I know this is a very old post but, as it came up in response to my Google search on the subject, I thought I'd post my solution.
After reading everything posted here, I found the simplest solution. Place a transition on the initial state as follows:
.btn {
opacity:0;
transition:0.6s;
}
.btn:hover {
opacity:1;
transition:0.8s;
}
So it has a transition time to the hover state and a transition time to the non-hover (ie normal) state. Saves a whole bunch of code.
Please can somebody explain the following.
I believe that a transition can be triggered by, for example, hovering.
My hover style should contain the CSS that I want my element to have at the end of the transition (in this case color:red).
The browser will then transition from the original css to the hover css using the time duration specified on the original unhovered css.
a{
color:blue;
transition: color 1s;
}
a:hover{
color:red;
}
This works perfectly.
BUT what if I want the transition from non-hover to hover to be instant? From experimenting, it appears to work if I add transition: color 0s; to my hover css. But to me this doesn't make sense, because my a css still has the 1second duration. If anything, I would expect adding this would cause a 1s transition on hover and a 0s transition when the mouse is moved away.
Can somebody explain where my understanding is wrong?
It's the duration of the transition to that state.
So adding 0 to hover means it will be a 0s transition to the hover state and then a 1s transition back to non-hover.
If it's only on the original non-hover then the transition applies to both.
this is the situation. If you make that opposite, it works perfectly.
Test
css:
a{
color:blue;
transition: color 0s;
}
a:hover{
transition: color 1s;
color: peachpuff;
}
see jsfiddle.
Enjoy!