CSS keyframes animation, move text around the screen in a square path
ID: 267
Category: CSS
Added: 2nd of June 2021
Views: 2,075
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>
.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;
}
.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;
}
.text
{
position: absolute;
animation: animate_text 8s alternate infinite;
}
