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.
Stack Overflow
CSS transform and transition on hover do not work after animation-f...
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 ...
12 Replies
Could you share the relevant code in a live sandbox like https://codepen.io please? it will be easier for the awesome people in here to help you if they can see what code/selectors youre using etc.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
from the top of my head i would use javascript to add and remove a separate class that has opacity: 1 declared. so on mouseenter , add class "visible" and on mouseleave remove class 'visible'
or if css only put the opacity on a selector like
.button:not(:hover) Here is the relevant CSS...
.Back-To-Top-Container {
position: fixed;
z-index: 99999 !important;
left: 20px;
height: 20px;
bottom: 0px;
width: 100%;
opacity: 60%;
}
.Back-To-Top-Container:hover {
opacity: 100%;
transition: opacity 500ms;
}
.Back-To-Top-Container {
animation: gradual-show auto linear;
animation-fill-mode: none;
animation-timeline: scroll();
animation-range-start: 30%;
animation-range-end: 50%;
}
@keyframes gradual-show {
0% {
opacity: 0%;
}
100% {
opacity: 60%;
}
}
My first CodePen - it probably smells of newbie, since I am (using code pen)
Thanks for making a sandbox. Animation timeline doesn’t have great browser support , I would recommend using it with a fallback or polyfill and wrapping it in an @supports. Neither Safari and FF will show the animation on scroll.
What are your thoughts on as I suggested:
1. add and remove a different class with Js or
2. write your css differently like .button:not(:hover) {opacity:0.6; animation: gradual-reveal linear ; }
I realise scroll animation is not well supported. However these things move quickly, so I suspect in a year or so, it will be good enough. I considered checking the scrollTop (I believe that is correct property) to know the scroll distance and simply running an animation. That is probably my best fallback. Those are a dime-a-dozen on sites these days. I was trying to go one better with the animation.
What is the advantage to your suggested re-write on controlling opacity?
@Daddyzilla another option to trigger the reveal of the 'go-to-top' is IntersectionObserver. put code in the observer definition to add the 'make-visible' class to your go-to-top element when the entry is not intersecting, then observe an element that will scroll off the top of the page (e.g., a header element).
You said your go-to-top must animate into visibility as the user scrolls about 30% down the page, does that mean it's some-degree animated-into-visibility between zero-scroll and 30%-scrolled?
if 'animation' isn't strictly called for, then a CSS transition of opacity from 0 to 0.6 when the scroll-point is reached would serve, then when the user hovers over the go-to-top, the :hover class can carry opacity from 0.6 to 1.0. no conflicts between animations because transition is managing visibility via opacity.
The advantage is that you said your problem was that when you run the animation it takes the opacity to 0.6 and then when you hover and except the opacity to go to 1, it’s not working.
So was just suggesting ways you could make your animation work and also have the hover work 🤷🏻♀️
here my take
https://codepen.io/MarkBoots/pen/MWRXVBw
Agree that using a data attribute is better than toggling a class
Thanks for that. I shall have a fiddle with your code pen and see how it goes. I think I must resign to the fact that I will need a CSS/JS solutions. Was attempting to do it purely with CSS (kinda more of a personal challenge more then anything lese). But the lack of support for CSS scroll-animations, and the fact that it breaks other fundamental requirements that the boss wants, means its time to re-think this with JS in mind. cheers!