Create Moving Text Vertically using CSS

thumbnail

In this tutorial, you will learn to create moving text vertically using CSS. You will be using keframes to move the text.

The CSS file is shown below:

@-webkit-keyframes mymove {
    0% {
        top:10px;
		padding-top:50px;
    }
    25% {
        top:210px;
		padding-top:50px;
    }
    50% {
        top:110px;
		padding-top:50px;
    }
    75% {
        top:210px;
		padding-top:50px;
    }
    100% {
        top:10px;
		padding-top:50px;
    }
}
#block {
    position:absolute;
    -webkit-animation: mymove 2s infinite;
}

The html file to show the result is shown below:

<h2>Create Moving Text Vertically using CSS</h2>
<br>
<div id="block">Your moving text</div>

When you open the file at browser, the result will be:

The full code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@-webkit-keyframes mymove {
    0% {
        top:10px;
		padding-top:50px;
    }
    25% {
        top:210px;
		padding-top:50px;
    }
    50% {
        top:110px;
		padding-top:50px;
    }
    75% {
        top:210px;
		padding-top:50px;
    }
    100% {
        top:10px;
		padding-top:50px;
    }
}
#block {
    position:absolute;
    -webkit-animation: mymove 2s infinite;
}
</style>
</head>
<body>
 
<h2>Create Moving Text Vertically using CSS</h2>
<br>
<div id="block">Your moving text</div>
 
</body>
</html>

Read another CSS tutorial through this link.

Back To Top