I styled some elements with :active and :hover pseudo-selectors, including a "button press" type animation that also triggers animations that slide the elements out of the viewport.
I'm trying to make a really smooth UX and want to delay the hyperlinked content from loading until after these animations finish.
How can you accomplish this load delay with HTML/CSS/JS?
Use the JavaScript setTimeout function to delay your redirect.
For example, if you have a link as below, call the function on link click:
<a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a>
Create a JavaScript function and add the delay using the setTimeout function:
function onBtnClickHandle(){
setTimeout(function(){
window.location="https://www.google.com/"
}, 3000);
}
You can set the timeout value as per your animation timing.
Demo:
function onBtnClickHandle(){
setTimeout(function(){
window.location="https://www.google.com/"
}, 3000);
}<a href="javascript:void" onclick="onBtnClickHandle()">Click Here</a>