I’m making a site that has animations on the screen load. The first animation I created was on a h1. I’m trying to make it not show up for a second before playing the animation.
CSS Snipet:
@keyframes slideLeftandFadeIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
section.pt1 {
background-image: url("imgs/bg-img-1.jpeg");
background-size: cover;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1.pt1 {
color: white;
font-family: "Tektur";
font-weight: "Black";
animation: 1.5s ease-in-out 1s slideLeftandFadeIn;
/* margin-bottom: -5px; */
}
Link: https://replit.com/@RedCoder/Trying-to-make-new-website?v=1