I am facing an issue with transitioning two divs, "hat" and "sock". The "hat" transition works as intended, but for some reason, the "sock" transition is not working. I have checked the properties and made sure they are set up in a similar way to "hat", yet it still does not work. I even attempted changing the @keyframe pageExitRight property from "right: 40" to "left: 40", but that did not resolve the problem.
body {
background-color: white;
}
.box {
/* TITLES OF CHOICES */
position: relative;
background-color: gainsboro;
border-radius: 50%;
width: 400px;
height: 400px;
display: inline-block;
margin: 10%;
transition: all 1s;
}
#hat {
animation-name: pageExitLeft;
animation-timing-function: ease-out;
animation-duration: 2s;
position: relative;
background-image: url(hat.jpg);
background-position: center;
}
#sock {
animation-name: pageExitRight;
animation-timing-function: ease-out;
animation-duration: 2s;
position: relative;
background-image: url(sock.jpeg);
background-position: center;
}
div.box:hover{
/* CHANGE COLOR WHEN MOUSE HOVER */
opacity: 0.5;
}
@keyframes pageExitLeft {
from { left: 40; opacity: 1 }
to { left: -440; opacity: 0 }
}
@keyframes pageExitRight {
from { right: 40; opacity: 1 }
to { right: -440; opacity: 0 }
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box" id="hat" >hat</div>
<div class="box" id="sock">sock</div>
</body>
</html>