I'm facing an unusual issue with my CSS/HTML
Check out my code below:
a:hover {
color: deeppink;
transition: all 0.2s ease-out
}
.logo {
height: 300px;
margin-top: -100px;
transition: all 0.2s ease-in;
transform: scale(1)
}
.logo:hover {
transition: all 0.2s ease-in;
transform: scale(1.05)
}
.p1 {
margin-left: 50px
}
.p1::first-letter {
font-size: 2em;
font-style: italic;
font-weight: bold
}
.p dwnld1 {
margin-top: 3%
}
.contactcontenu {
text-align: center;
margin-top: 5%
}<html>
<link href="stylekalaha.css" rel="stylesheet" type="text/css" />
<head>
<title>Le Jeu du Kalaha</title>
</head>
<body>
<h1> <img class ="logo" src="images/logoweb.png"></h1>
<div class="bandeau">
<div class="left"> <a href="index.html"> Projet </a></div>
<div class="gauche"><a href="regles.html"> Règles </a></div>
<div class="droite"><a href="download.html"> Téléchargement </a></div>
<div class="right"> Contacts </div>
</div>
<div class="contactcontenu"> <center>
<form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14753a767b617a7567546d757c7b7b3a7266">[email protected]</a>" name="envoi" method=POST enctype="text/plain">
<table border="0">
<tr>
<td>
<p><b>Nom : </b><input name="nom"size=50 maxlength=50></p>
<p><b>Prenom : </b><input name="PRENOM"size=50 maxlength=50></p>
<p><b>Mail : </b><input name="mail" size=50 maxlength=50></p>
<textarea name="message" cols="60" rows="5"></textarea>
</td>
</tr>
</table>
<input type="submit" value="Envoyer" name="Envoyer">
<input type="reset" name="Submit" value="Effacer">
</form>
</center></div>
<div class="end"> </div>
</body>
</html>My transitions work perfectly on other HTML files, but not on this one. When I load the webpage, my div class=bandeau is animated, swiping from the middle of the page to the top. If I remove my JavaScript, there's no issue.
So why does my JavaScript affect this particular HTML page? It works fine on others, where my logo is animated as expected. The image transition + post-loading transition seems strange...