My Computer Tips was launched in 2015 and provides information for common tasks in various Linux distributions and other computer related subjects.
My Computer tips has over 290 tutorials and tips.
- Home
- About My Computer Tips
- Computer Parts For Sale (UK Only)
- Privacy
- Affiliate Disclosure
- Latest Tips & Tutorials
- Featured Tips & Tutorials
- Most Popular Tips & Tutorials
- Recently Viewed
- Recently Updated Tips & Tutorials
- All Tips & Tutorials
If you found the information on My Computer Tips useful, please consider sharing our site details.
Categories
Amazon Associates (1)
Android (8)
Apps (1)
Bash Scripts (4)
C++ (4)
Cachyos (2)
Caja File Manager (2)
Cinnamon Desktop (1)
Computer Ramblings (17)
CPanel (1)
CSS (7)
Cups (Common UNIX Printing System) (3)
Debian (1)
Emulators (15)
Facebook (1)
Firefox (5)
Gnome3 (2)
Google (3)
Google Chrome (2)
HTML (5)
Image Editors (2)
Java (5)
Kubuntu (5)
Libre Office Draw (2)
Linux (3)
Linux Mint (4)
Linux Terminal (47)
Lubuntu (4)
MariaDB Database (10)
MySQL Database (2)
PC Components & Maintenance (8)
PHP7 (12)
Python3 (5)
Retro Software, Magazines & Games (12)
Search Engines (SEO) (2)
SQlite (1)
Steam (1)
Thunderbird Email Client (6)
Ubuntu (32)
Ubuntu Mate (15)
Vanilla Javascript (9)
Virtualization (5)
Windows (1)
Wine (5)
Xubuntu (10)
Show Categories
Amazon Associates (1)
Android (8)
Apps (1)
Bash Scripts (4)
C++ (4)
Cachyos (2)
Caja File Manager (2)
Cinnamon Desktop (1)
Computer Ramblings (17)
CPanel (1)
CSS (7)
Cups (Common UNIX Printing System) (3)
Debian (1)
Emulators (15)
Facebook (1)
Firefox (5)
Gnome3 (2)
Google (3)
Google Chrome (2)
HTML (5)
Image Editors (2)
Java (5)
Kubuntu (5)
Libre Office Draw (2)
Linux (3)
Linux Mint (4)
Linux Terminal (47)
Lubuntu (4)
MariaDB Database (10)
MySQL Database (2)
PC Components & Maintenance (8)
PHP7 (12)
Python3 (5)
Retro Software, Magazines & Games (12)
Search Engines (SEO) (2)
SQlite (1)
Steam (1)
Thunderbird Email Client (6)
Ubuntu (32)
Ubuntu Mate (15)
Vanilla Javascript (9)
Virtualization (5)
Windows (1)
Wine (5)
Xubuntu (10)
CSS keyframes animation, move text around the screen in a square path
ID: 267
Category: CSS
Added: 2nd of June 2021
Views: 2,472
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;
}
Links
Linux Forums
Arch Linux Forums
Fedora Forums
Linux Mint Forums
Linux Questions Forum
Ubuntu Forums
Linux Gaming
Gaming on Linux
ProtonDB
Steam Download
Other Linux / Computer Sites
Big Box Collection
Phoronix
OMG Ubuntu
Other Sites / Shopping
Computer Parts For Sale (UK Only)
Buy Google Play Vouchers (UK Only)
Amazon (UK Only)
Latest Linux News
Linux 6.18 Device Tree Prepares For Arm C1 Nano / Pro / Premium / Ultra CPUs - PhoronixPublished: October 3, 2025, 1:47 pm
7 unusual Linux distros built for one purpose (and why you should try them) - XDAPublished: October 4, 2025, 8:00 pm
9to5Linux Weekly Roundup: October 5th, 2025 - 9to5LinuxPublished: October 5, 2025, 5:26 pm
Haptic Touchpad Support Makes It Into Linux 6.18 - PhoronixPublished: October 5, 2025, 10:17 am
Linux 6.18 DRM Pull Includes New Tyr & Rocket Drivers, More AMD & Intel GPU Enhancements - PhoronixPublished: October 5, 2025, 1:34 pm
Vicinae is basically Raycast for Linux, and it's (almost) everything I wanted - XDAPublished: October 4, 2025, 4:30 pm
CISA Sounds Alarm on Critical Sudo Flaw Actively Exploited in Linux and Unix Systems - The Hacker NewsPublished: September 30, 2025, 5:41 am
Linux 6.17 Released: Intel Panther Lake Xe3 Graphics Ready, New Optimizations - PhoronixPublished: September 28, 2025, 10:01 pm
4 reasons why I would pick MX Linux instead of AntiX for old PCs - XDAPublished: October 5, 2025, 9:00 am
AMD-Pensando Ionic RDMA Driver Added To Linux 6.18, Intel IPU E2000 Hardware Too - PhoronixPublished: October 5, 2025, 4:48 pm