Category: CSS

Added: 2nd of June 2021

Viewed: 297 times

CSS keyframes animation, move text around the screen in a square path

Before CSS3 one way to animate text was to use Adobe Flash, however visitors to your website would need to have the Adobe Flash plugin installed in their own browser to be able to view your animation.

Since Flash has now been phased out, we can use keyframes in CSS3 to create a simple animation using only a few lines of code.

The code below moves the text My Computer Tips in a square path around the screen.


<style>
.text
{
position: absolute;
animation: animate_text 8s;
}

@keyframes animate_text
{
0% { left: 0px; top: 0px; }
25% { left: 200px; top: 0px; }
50% { left: 200px; top: 200px; }
75% { left: 0px; top: 200px; }
100% { left: 0px; top: 0px; }
}

</style>
<div class="text">My Computer Tips</div>


How do I loop the animation?
To loop the animation we use the infinite property
<style>
.text
{
position: absolute;
animation: animate_text 8s infinite;
}


How do I alternate the animation?
To alternate the animation we can use alternate property
<style>
.text
{
position: absolute;
animation: animate_text 8s alternate infinite;
}

Other Tips & Tutorials

CSS

CSS keyframes animation, move text around the screen in a square path

Posted: 2nd of June 2021

Views: 297

CSS

CSS animation, rotate image 90 degrees using transform rotate

Posted: 20th of May 2021

Views: 318

CSS

Alternating div background colours using CSS

Posted: 9th of April 2021

Views: 436

CSS

How I created rounded boxes in the early days of the web using HTML tables, .gifs and Photoshop

Posted: 6th of March 2021

Views: 501

CSS

Using CSS grids to create a simple grid layout

Posted: 10th of April 2020

Views: 982

CSS

Simple CSS responsive menu for websites and mobile devices

Posted: 26th of January 2016

Views: 1720