Я получаю две ошибки в своем коде CSS: «Ожидаемое RBRACE», «Неожиданное RBRACE» и «Ожидаемое LBRACE»

Question

Я новичок в CSS и HTML, так как изучаю его в свободное время для прямой трансляции. Я пытаюсь создать пользовательскую текстовую анимацию текста, который сокращается пополам, причем левая половина всплывает вверх, а правая половина опускается вниз (возможно, в будущем он сменится на то, что они оба просто качаются и опускаются вниз).

Я не совсем уверен, что попробовать на этом этапе, я добавил, удалил и испортил код всеми возможными способами. Я искал интернет и этот форум и не нашел ничего, чтобы помочь мне.

#keyframes slideup {
    0% {
        top: 50%
    }        
    30% {
        top: 50%;
    }        
    90% {
        top 40%;
    }
    100%: {
        top: 40%;
}

Я ожидаю, что левая половина текста всплывет вверх, а правая - вниз, но этого не происходит, и я предполагаю, что это из-за моего кода.

Answer 1

p{
position:absolute;
top:50%;
left:50%;
animation:slideup 1s infinite;
}
@keyframes slideup {
    0% {
        transform:translateY(0);
    }        
    100%{
      transform:translateY(-100px)
}
}

<p>text<p>

вот как ты создаешь анимацию!