Dunce Caps for Cats Dot Com

I wanted to replicate the obsolete html tag <marquee direction="up"> with css animation. Here is my demonstration on Codepen and you can see this effect in action in this post.

First, I wrapped the marquee block inside <div class="box"> so I can center this section on the page:

<div class="box">
  <div class="marquee-up">
    <p>
      😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎  😎
    </p>
  <div>
</div>

And in CSS I created and used a keyframe animation:

.box {
  height: 200px;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.marquee-up {
  width: 100%;
  position: absolute;
  text-align: center;
  animation: marquee-up 2.5s linear infinite;
}
@keyframes marquee-up {
  0% { top: 100%; }
  100% { top: -20px; }
}