creocodigo
Scrolling Text Animation in Pure CSS

Scrolling Text Animation in Pure CSS

Shikhar Baniya's photo
Shikhar Baniya
·

2 min read

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create an amazing and cool Scrolling Text Animation in Pure CSS. You might have seen a lot of text effect like typewriter, glowing, and moving text effects. I myself have posted many text animations. And here is another one. You can see the text going down and coming from up between two texts. I hope you find this useful and interesting.

Here's a preview-

loom.com/share/1f699cdbfe864c45b62659329d0c..

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Scrolling Text Animation</title>
</head>
<body>
   <div id=container>
  Create 
  <div id=flip>
    <div><div>Opportunities</div></div>
    <div><div>Moments</div></div>
    <div><div>Memories</div></div>
  </div>
  Together!
</div>
</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
  background: #f6f7fc;
}
#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}
#flip {
  height:50px;
  overflow:hidden;
}
#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
  border-radius: 5px;
}
#flip div:first-child {
  animation: show 5s linear infinite;
}
#flip div div {
  background:#ebb134;
}
#flip div:first-child div {
  background: #67eb34;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love

CSS AnimationCSS3webdevHTML5Web Development