eu fiz o seguinte codigo
nav{
background-color: rgba(255, 255, 255, 0.15);
}
body {
overflow: hidden;
}
.squares li {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
display: block;
position: absolute;
bottom: -40px;
animation: up 2s infinite alternate;
z-index:-1
}
@keyframes up {
from {
opacity: 0;
transform: translateY(0);
}
50% {
opacity: 1;
}
to {
transform: translateY(-800px) rotate(960deg);
}
}
ai quando eu coloco esse codigo aqui
/* name animation */
#sobre {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: rgba(25, 25, 25);
}
#line {
border-right: 2px solid rgba(255, 255, 255, 0.75);
color: rgba(255, 255, 255, 0.75);
font-family: "Raleway", Helvetica, sans-serif, monospace;
font-size: 3em;
text-align: center;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
animation: blinkCursor 600ms steps(40) infinite ,
typing 4s steps(40) 1s normal both;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 14.5em;
}
}
@keyframes blinkCursor {
from {
border-right-color: rgba(255, 255, 255, 0.75);
}
to {
border-right-color: transparent;
}
}
a outra animação para de funcionar oque eu faço para fazer funcionar tudo?