Opacity overload?
Hi,
I have been tasked with creating a "back-to-top" button. I have 95% of it working. But I am stuck. And I believe the answer is "you can't do that". But I figured I would ask first to know for sure, and work out a reasonable compromise on what the boss wants...
So this button, which is more complicated then just a <button> or <a> needs to meet the following requirements:
1) It should show up after the user has scrolled a bit down the page (30%)
2) Should be semi-transparent so user can see the content under the floating button
3) Sit in the bottom-left corner of the page
4) go completely opaque when the user hovers over this button, so they can read the link text more clearly
And finally 5) animate itself onto the page when the user has scrolled to 30%. And by animate I mean adjust opacity from 0 up to 60%
I can do 1 to 4 easily. Just stick my control in the corner, set the opacity, create a hover rule - done. simple. And doing the animation on scroll is equally straight forward
The problem I have is putting these 2 together. The issue I am finding is that because the user can effectively control the animation timeline, it is the animation which is taking control of opacity. So my :hover rule is doing nothing. In short, the animation is taking prioirty over the :hover in terms of controlling opacity. And I found a link on Stack Overflow which essentially confirms this:
https://stackoverflow.com/questions/36551715/css-transform-and-transition-on-hover-do-not-work-after-animation-fill-mode-for
So I am trying to come up with a way to do this. I can't transition something like display. So my options to hide the button between 0 and 30% are limited.
Another option is to transition in the button in some other way such as scale or transformY.
So, before I tell him no, I'd like to know if I have overlooked something obvious, or a clever trick, so that I can do all the opacity things he wants to do.
thanx!!
ps- the CSS was removed due to msg length limit.
I have been tasked with creating a "back-to-top" button. I have 95% of it working. But I am stuck. And I believe the answer is "you can't do that". But I figured I would ask first to know for sure, and work out a reasonable compromise on what the boss wants...
So this button, which is more complicated then just a <button> or <a> needs to meet the following requirements:
1) It should show up after the user has scrolled a bit down the page (30%)
2) Should be semi-transparent so user can see the content under the floating button
3) Sit in the bottom-left corner of the page
4) go completely opaque when the user hovers over this button, so they can read the link text more clearly
And finally 5) animate itself onto the page when the user has scrolled to 30%. And by animate I mean adjust opacity from 0 up to 60%
I can do 1 to 4 easily. Just stick my control in the corner, set the opacity, create a hover rule - done. simple. And doing the animation on scroll is equally straight forward
The problem I have is putting these 2 together. The issue I am finding is that because the user can effectively control the animation timeline, it is the animation which is taking control of opacity. So my :hover rule is doing nothing. In short, the animation is taking prioirty over the :hover in terms of controlling opacity. And I found a link on Stack Overflow which essentially confirms this:
https://stackoverflow.com/questions/36551715/css-transform-and-transition-on-hover-do-not-work-after-animation-fill-mode-for
So I am trying to come up with a way to do this. I can't transition something like display. So my options to hide the button between 0 and 30% are limited.
Another option is to transition in the button in some other way such as scale or transformY.
So, before I tell him no, I'd like to know if I have overlooked something obvious, or a clever trick, so that I can do all the opacity things he wants to do.
thanx!!
ps- the CSS was removed due to msg length limit.
Stack Overflow
I'm using a CSS animation to slide a div in when the page loads. (Chrome)
I use animation-fill-mode: forwards; to persist the new state.
From there I would like to have a simple hover animation ...
I use animation-fill-mode: forwards; to persist the new state.
From there I would like to have a simple hover animation ...
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
