Alpha-Craft
I’m trying to make a little website but the animations and transitions don’t work properly. If I load the site, delays don’t work and some animations didn’t even load with the site. I have inspected it multiple times. It just doesn’t work. Please help me!
Website: Scratchy-Games (epizy.com)
The original CSS:
@font-face {
src: url(fonts/Ubuntu-Bold.ttf);
font-family: Ubuntu;
}
* {
margin: 0;
padding: 0;
font-family: Ubuntu;
}
body {
background-color: #eee;
}
.wrapper {
opacity: 0;
margin: 0 auto 0 60px;
width: 1000px;
animation-name: fade_in;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
nav {
width: 100%;
height: 100px;
background-color: #fff;
margin-bottom: 10px;
}
ul {
margin-left: 0px;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a:hover {
color: red;
text-decoration: underline;
text-decoration-style: dotted;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
color: #1e1e1e;
padding: 0 20px;
padding-top: 2.5px;
transition: all 0.25s ease-in-out;
}
#logo-img:hover {
color: rgb(0, 210, 100);
text-decoration: underline overline;
text-decoration-color: rgba(0, 210, 100, 0.5);
text-shadow: inherit inherit inherit rgb(0, 210, 100);
}
#logo-img {
color: black;
font-size: 32px;
text-shadow: 2px 3px 5px #666;
padding: 0 10px 0 0;
}
@keyframes fade_in {
from {
margin-left: 0px;
opacity: 0;
}
to {
margin-left: 60px;
opacity: 1;
}
}
/* ul li img {
display: block;
margin: 15px 0;
border-width: 3px;
border-style: outset;
border-color: #ABABAB;
border-radius: 15px;
} */