--- UPDATE 2 ----
Here is a different example video showcasing the bizarre behavior of my react application. I am struggling to identify the root cause of this issue.
I have a div with the class name side-btn
It contains an animation that is not functioning as expected. The animation is a simple box shadow transition:
.side-btn {
height: 100px;
width: 100px;
background-color: white;
box-shadow: 0 0 0 0 black;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 black;
}
70% {
box-shadow: 0 0 10px 20px black;
}
100% {
box-shadow: 0 0 0 0 black;
}
}
<div class="side-btn"></div>
I referenced this pulse animation
In the provided code snippet, the animation behaves as intended. However, when implemented within my reactJS application using the same CSS styling, the behavior is completely different. The box simply expands and contracts without the desired pulse effect. Troubleshooting this bug has proven to be challenging.
function Sidebar(props) {
return (
<nav className = {"sidebar" + (props.active ? "" : " hidden")}>
<div class="side-btn"></div>
</nav>
)
}
Upon inspection, it appears that the side button div is only changing size without pulsating as expected. Debugging this issue has been difficult.
-- UPDATE:
I have created a sandbox environment and used overflow's code snippets, which worked properly. However, once integrated into my react app, the undesired result persists. I have recorded a short clip for clarification. The exact cause of this discrepancy eludes me.
The only additional code difference is wrapping the side-btn within a 'sidebar' container, which centers it and offsets it slightly offscreen.
.sidebar {
position: fixed;
top:50vh;
left:-35px;
}