I was doing a commision for a client on minecraft and when i was trying to do the css part it wouldn’t give me my box to do the animations, here’s the test code as i can’t send the actual code for privacy reasons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box"></div>
<style>
body {
background-color: rgb(22, 22, 22);
}
.text {
color: rgb(255, 211, 211);
font-size: 36px;
text-align: center;
font-family: Arial, sans-serif;
}
.desc {
color: azure;
text-align: center;
font-size: 20px;
}
.text2 {
color: honeydew;
text-align: center;
font-size: 20px;
}
.titolo {
color: white;
font-size: 25px;
text-align: center;
}
.text3 {
color: azure;
text-align: center;
font-size: 20px;
}
@keyframes Fadeout {
from {
transform: translateY(-100px);
color: transparent;
animation-delay: 0.5s;
}
to {
transform: translateY(0);
}
}
.box {
position: absolute;
width: 50%;
height: 150%;
color: rgb(157, 60, 60);
top: 50px;
left: 50%;
}
.box:hover {
animation-name: Fadeout;
animation-duration: 1s;
animation-delay: 1.5s;
animation-iteration-count: 1;
}
</style>
</body>
</html>
I was expecting the block disappering for ever when i passed the cursor on it but it doesn’t even show the box
You need to sign in to view this answers