CSS3 hover opacity ease-in-out effect?
Don’t repeat the transition rules. CSS pre-processors can help with the vendor prefixing but you really don’t need to (and shouldn’t) repeat the transition declarations in the :hover . Just set them once in elements’s default state like so:
.button-hover < font-family: arial black; font-size: 100px; color: #000; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; opacity: 1; >.button-hover:hover
SASS & LESS can make this easy for you. You can use SASS & LESS Mixins for this.
Example (SASS):
/* Create a Mixin (SASS) */ @mixin transition($property, $time, $method) < -webkit-transition: $property $time $method; -moz-transition: $property $time $method; -ms-transition: $property $time $method; -o-transition: $property $time $method; transition: $property $time $method; >/* Include this Mixin (SASS) */ .button-hover:hover
Example (LESS):
/* Create a Mixin (LESS) */ .transition(@property, @time, @method) < -webkit-transition: @arguments; -moz-transition: @arguments; -ms-transition: @arguments; -o-transition: @arguments; transition: @arguments; >/* Include this Mixin (LESS) */ .button-hover:hover
This will convert into CSS:
More about SASS, LESS
Those are prefixes needed for browser support. You can see here which browsers versions needs a prefix and decide if you can delete them based on what browsers you want to support.
For example the -moz- prefix is for Firefox and you can see that from Firefox 16 it is not needed anymore, so you can use transition without -moz- for Firefox 16+.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
CSS animation: hover-in and hover-out
The hover-in works perfectly, but the hover-out always running at startup. It should animate when has been hover-in.
Then tried to set the CSS var —anim-hover-out: none , so no animation on startup. Then, on the end of hover-in, set —anim-hover-out: hover-out , so the hover-out animation now ready to play. But setting the CSS var inside @keyframes didn’t work.
The goal is: .test:not(:hover):has-hover
Note: no JavaScript, pure CSS only.
body < font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; font-size: 13px; >div < background: #eee; margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* border-radius */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* box-shadow */ -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; >:root < --anim-hover-out: unset; >.test:not(:hover) < animation-name: var(--anim-hover-out); animation-duration: 500ms; animation-fill-mode: both; >.test:hover < animation-name: hover-in; animation-duration: 500ms; animation-fill-mode: both; >@keyframes hover-in < 0: < transform: scale(1); >50% < transform: scale(1.5); >100% < transform: scale(1.3); --anim-hover-out: hover-out; >> @keyframes hover-out < 0: < transform: scale(1.3); >50% < transform: scale(0.8); >100% < transform: scale(1); >>2 Answers 2
There is no way to set this without using JavaScript.
Because even if you manually define the animation name, the animation is triggered instantly.
- So setting it up afterwards is not a solution. After the important ( onmouseleave ) thing you have to set it over.
See also snippet
A complete example that works
body < font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; font-size: 13px; >div < background: #eee; margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* border-radius */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* box-shadow */ -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; >:root < --anim-hover-out: hover-out-fake; >.test:hover < animation-name: hover-in; animation-duration: 500ms; animation-fill-mode: both; >.test < animation-name: var(--anim-hover-out); animation-duration: 500ms; animation-fill-mode: both; >@keyframes hover-in < 0: < transform: scale(1); >50% < transform: scale(1.5); >100% < transform: scale(1.3); --anim-hover-out: hover-out; >> @keyframes hover-out < 0: < transform: scale(1.3); >50% < transform: scale(0.8); >100% < transform: scale(1); >>Actually this can be achieved with CSS-only. Admittedly it is a hacky way to do it, but if Javascript is out of the question for some reason, then we can add an animation to a wrapper that will change its opacity from 0 to 1.
You can hide your content for the initial phases of page load via
body < animation-name: loading; animation-duration: 500ms; animation-fill-mode: both; >@keyframes loading < 0% < opacity: 0; >99% < opacity: 0; >100% < opacity: 1; >> which will hide your item while it’s performing the hover-out animation at page initialization. If you want to avoid waiting, then you can attach the animations to classes, like .hovered and .blurred and toggle them via Javascript. If hiding body for one of its elements is too much, then you can wrap another div around your div and specify this animation for that one.
body < font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; font-size: 13px; >div < background: #eee; margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* border-radius */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* box-shadow */ -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; >:root < --anim-hover-out: unset; >body < animation-name: loading; animation-duration: 500ms; animation-fill-mode: both; >@keyframes loading < 0% < opacity: 0; >99% < opacity: 0; >100% < opacity: 1; >> .test:not(:hover) < animation-name: hover-out; animation-duration: 500ms; animation-fill-mode: both; >.test:hover < animation-name: hover-in; animation-duration: 500ms; animation-fill-mode: both; >@keyframes hover-in < 0: < transform: scale(1); >50% < transform: scale(1.5); >100% < transform: scale(1.3); --anim-hover-out: hover-out; >> @keyframes hover-out < 0: < transform: scale(1.3); >50% < transform: scale(0.8); >100% < transform: scale(1); >>Play CSS animation on hover, pause on hover out
Is it not possible to use -webkit-animation-play-state: paused; on a parent div?
See an example here, when you hover out it goes back to frame 0.
4 Answers 4
set the animation on #tech with play state paused
then change play-state to running on hover
I was looking for this as well, and @MikeM’s answer got me where I needed to go, and with @HellGate’s comment on that answer concerning Chrome:
you need the pause state after the animation else it does not work
I was interested in how to pause animation on a PNG sprite sheet when it was inactive, and continue/resume on hover, so the accepted answer helped in that regard.
Here is a demo showing how this can be done on a PNG Sprite Sheet (credits to the sprite, and original CSS go to Guil Hernandez and his awesome blog post here): CodePen.
.monster < width: 190px; height: 240px; margin: 2% auto; background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center; -webkit-animation: monsterAnimation .8s steps(10) infinite; animation: monsterAnimation .8s steps(10) infinite; -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ animation-play-state: paused; >.monster:hover < -webkit-animation-play-state: running; animation-play-state: running; >@keyframes monsterAnimation < 100% < background-position: -1900px; >> MouseOver and MouseOut In CSS
For using mouse into one element we use the :hover CSS attribute. How about for mouse out of the element? I added a transition effect on the element to change the color. The hover effect works fine, but what CSS attribute should I use for mouse out to apply the effect? I’m looking for a CSS solution, not a JavaScript or JQuery solution.
4 Answers 4
Here is the best solution, i think.
CSS onomouseout:
CSS onmouseover:
It’s better, because if you need to set some styles ONLY onmouseout and trying to do this in this way
you will set your styles and for onmouseover too.
Did not work for me, what I wanted was to display a different color when mouse is dragging a slider and mouse is in the slider(slider updates — green) or mouse is outside the slider and dragging(on mouse up slider does not update — red).
I wanted to apply an animation only when a mouseout event happened, but not at page load. This solution is not appropiate for that kind of requirement.
CSS itself does not support a mousein or mouseout selector.
The :hover selector will apply to the element while the mouse is over it, adding the style when the mouse enters and removing the style when the mouse leaves.
The nearest approach is to define the styles which you would place in mouseout within your default (non-hover) styles. When you mouse-over the element the styles within hover will take effect, emulating a mousein , and when you move your mouse off the element the default styles will take effect again, emulating mouseout .
The transition s defined for the div:hover style will take effect when the mouse enters (and hover is applied). The transition s for the div style will take effect when the mouse leaves (and hover is removed). This results in the mousein and mouseout transitions being different.
What is the opposite of :hover (on mouse leave)?
Is there any way to do the opposite of :hover using only CSS? As in: if :hover is on Mouse Enter , is there a CSS equivalent to on Mouse Leave ? Example: I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from #999 to black . How can I create the opposite effect when the mouse leaves the item area, with an animation from black to #999 ? jsFiddle (Have in mind that I do not wish to answer only this example, but the entire «opposite of :hover » issue.)
The opposite of :hover is quite simply :not(:hover) ; however, :hover is not synonymous with onmouseenter nor is :not(:hover) the same as onmouseleave . CSS doesn’t have any concept of DOM events.
@Cthulhu: :hover simply means «an element that has a mouse pointer over it». It doesn’t indicate if the mouse pointer transitioned from another element to this element. It just means that the mouse pointer is currently on the element.
@Moin Zaman: Yep. As long as your mouse isn’t over a certain element, then :not(:hover) will apply. Here’s a demo: jsfiddle.net/BoltClock/rghBX
13 Answers 13
If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:
The definition of hover is:
The :hover selector is used to select elements when you mouse over them.
By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states — http://css-tricks.com/different-transitions-for-hover-on-hover-off/
«(Have in mind that I do not wish to answer only this example, but the entire «opposite of :hover» issue.)»
@Cthulhu — I’ve edited my answer now. That might help a bit more. I thought that was too obvious an answer.
+1 for pointing me in the right direction. I was having an animation discrepancy between browsers. Chrome was rendering everything smoother but I had a .1s different in transitions and Mozilla and IE were both displaying the error. I was able to fix it by matching up my transition numbers.
Ugh. The ‘definition’ of :hover you’ve quoted is from W3Schools, who are in no way an authoritative source. The actual spec can be found at w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes, although it’s not the most accessible explanation.
The opposite is using :not
What a nice answer, I was blending the color with background image of div on hover but didn’t get the animation on mouse leave. I used this answer to blend again white color to background image tricking CSS.
Just use CSS transitions instead of animations.
Transition works both on mouse over and mouse leave. It’s enough to specify styles for normal state and :hover state.
@CloudWalker Not sure what you mean. Transition cannot be stopped, it rolls back when the selector does not match anymore.
For example, if you have a transition on text colour from black to white, then the instant the text loads, it changes from white to black(same duration as the transition duration). Not sure if this is an issue on my end.
Put your duration time in the non-hover selection:
Just add a transition to the element you are messing with. Be aware that there could be some effects when the page loads. Like if you made a border radius change, you will see it when the dom loads.
No there is no explicit property for mouse leave in CSS.
You could use :hover on all the other elements except the item in question to achieve this effect. But Im not sure how practical that would be.
I think you have to look at a JS / jQuery solution.
It’s not needed for the example above, but it appears to be the best solution for the whole «mouse leave» problem.
Just add a transition and the name of the animation on the class inicial, in your case, ul li a, just add a «transition» property and that is all you need
ul li < display: inline; margin-left: 20px; >ul li a < color: #999; transition: 1s; -webkit-animation: item-hover-off 1s; -moz-animation: item-hover-off 1s; animation: item-hover-off 1s; >ul li a:hover < color: black; cursor: pointer; -webkit-animation: item-hover 1s; -moz-animation: item-hover 1s; animation: item-hover 1s; >@keyframes item-hover < from < color: #999; >to < color: black; >> @-moz-keyframes item-hover < from < color: #999; >to < color: black; >> @-webkit-keyframes item-hover < from < color: #999; >to < color: black; >> @keyframes item-hover-off < from < color: black; >to < color: #999; >> @-moz-keyframes item-hover-off < from < color: black; >to < color: #999; >> @-webkit-keyframes item-hover-off < from < color: black; >to < color: #999; >>Another way of using transition is just specifying the milliseconds like so: transition: 500ms;
Try the following snippet
You can use CSS3 transition
Some good links:
Although answers here are sufficient, I really think W3Schools example on this issue is very straightforward (it cleared up the confusion (for me) right away).
Use the :hover selector to change the style of a button when you move the mouse over it.
Tip: Use the transition-duration property to determine the speed of the «hover» effect:
Example
In summary, for transitions where you want the «enter» and «exit» animations to be the same, you need to employ transitions on the main selector .button rather than the hover selector .button:hover . For transitions where you want the «enter» and «exit» animations to be different, you will need specify different main selector and hover selector transitions.