Как сделать мигающий «курсор / прямоугольник» в CSS после «нормального» текста?

Question

То, что я пытаюсь сделать, это заставлять этот фиолетовый квадрат мигать каждую секунду сразу после «МОЕ ИМЯ ЗДЕСЬ».(Аналогично курсору, если вы открываете терминал) Вот скриншот того, как это выглядит прямо сейчас в браузере

.intro-container {
     margin: 0 auto;
     margin-top: 20vh;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
}

.intro-title::before {
      content: ">\A0"
}

.intro-container .intro-title {
}

.blinking {
     width: 50px;
     height: 100px;
     background-color: rgba(116,127,224,.65);
     animation-name: blob;
     animation-duration: 1s;
     animation-iteration-count: infinite;
}

@keyframes blinking {
    50% {
        background-color: transparent
    }
}

<div class="intro-container">
    <div class="intro-title">
        MY NAME HERE <div class="blinking"></div>
    </div>
</div>

Answer 1

Я думаю, проблема в том, что ваш animation-name не установлен на правильное значение. Измените его на blinking (название ваших ключевых кадров) вместо blob, чтобы он использовал ту анимацию, которую вы настроили.

Answer 2

Попробуйте это:

.blinking {
    width: 50px;
    height: 100px;
    background-color: rgba(116,127,224,.65);
    -webkit-animation: blinking 2s infinite;
    animation: blinking 2s infinite;
}

@keyframes blinking {
    0% {
        background-color: transparent;
    }
    49% {
        background-color: transparent
    }
    50% {
        background-color: rgba(116,127,224,.65);
    }
}