<h1 class="fadeInUp-animation">CSS fade-in animation</h1>
* {
box-sizing: border-box;
}
body,
html {
font-family: "Roboto", sans-serif;
background-color: black;
color: white;
}
h1 {
margin: 50px 0;
text-align: center;
}
@keyframes fadeInUp {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
.fadeInUp-animation {
animation: 1.5s fadeInUp;
}
This Pen doesn't use any external CSS resources.