I am attempting to create an animation for a button that consists of a black circle in the background and white text in the foreground. The black circle should scale from full size to smaller size, while the text should be white when overlapping the circle and black when outside of it.
To better visualize this effect, you can view a GIF here:
My attempt at coding this animation is as follows:
.menu {
position:fixed;
bottom:0;
left:0;
background-color:white;
padding:4rem;
}
.container {
width:50px;
height:50px;
position:relative;
}
.container:after {
z-index:-1;
position:absolute;
border-radius:50px;
top:0;
left:0;
right:0;
bottom:0;
content:"";
background:black;
animation:scale 1s linear alternate-reverse infinite;
}
.text {
z-index:1;
color:white;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
mix-blend-mode: difference;
}
@keyframes scale {
from {
margin:0;
}
to {
margin:15px;
}
}<div class="menu">
<div class="container">
<div class="text">Information</div>
</div>
</div>The reason behind animating the margin within the @keyframes is because using transform removes the mix-blend-mode in certain situations. Additionally, it appears that a wrapper (in this case .menu) with a background-color must be present for the text to change color outside of the circle.
This animation currently only functions in Chrome. Are there alternative methods that would work across multiple browsers?
Furthermore, is there a way for the text to change color outside of the circle without requiring a background-color on its container? I plan to fix this button on a page and prefer a solution that seamlessly blends with the background.