У меня есть этот простой скрипт HTML 5 и CSS3 с причудливой кнопкой, которая при нажатии делает анимацию CSS, но только тогда, когда у нее нет каталога. Когда я добавляю редирект, сайт сразу загружается, игнорируя анимацию, данную кнопке. Как добавить перенаправление на кнопку и полностью воспроизвести анимацию CSS, прежде чем сайт загрузит новую страницу
<!DOCUTYPE html>
<html lang="En">
<meta charset="utf-8">
<!--CREDITS-->
<meta name="Developer" content="Elitezen">
<meta name="Language(s)" content="HTML5 , CSS3 , JS">
<meta name="Software" content="anWriter">
<!-- END CREDITS -->
<head>
<title> Elitezen Website Test | Login Page </title>
<style>
html {
background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-size: cover;
}
h1 {
color:#ffffff;
margin-top:20px;
}
#Login{
/*VISUALS*/
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
background-color:#0095f0;
border:none;
color:#ffffff;
font-weight:bold;
border-radius:4px;
display: inline-block;
/*POSITION*/
position: absolute;
top: 400px;
right: 135px;
/*Metrics*/
font-size:20px;
/*ANIMATION*/
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
#Login span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#Login span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top : 0;
right: -20px;
transition: 0.5s;
}
#Login:hover span {
padding-right: 25px;
}
#Login:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h1 align="center">Welcome! <br /> Please Sign In...</h1>
<form action="Oofio.html">
<button id="Login" style="vertical-align:middle">
<span>
Login
</button>
</span>
</form>
<script>
</script>
</body>
</html>