This blog is about how to create keyframes and what they are, and creating animations using keyframes. If you want to learn how to code a color changing username (or basically anything), you're in the right place. If you just want animation of username though, I recommend you read this article.

First go to your common.css, before you click on edit/create, read the rest of this blog.

The first step in creating an animation is to decide what type of animation you want. CSS allows you to make all kinds of animations: colors, movements, size changing, and any other attributes of CSS can be animated. This blog will show you both color changing and text size changing animations.

1. Make a keyframe. Below is the syntax, inside the curly braces is where you put the meat of the code. But it' important to have the frame code exactly the same.

@keyframe {
}

2. Add steps. Animations are basically just a few steps in the program that are transitioned rather smoothly than let's say a stop motion animation. But the idea behind it is the same. You are making several captures of the different stages of the animation, and letting CSS do the rest for you.

@keyframe {
    _% {attribute: specification; attribute: specification;}
    _% {attribute: specification; attribute: specification;}
    _% {attribute: specification; attribute: specification;}
}

Replace the underscore (_) with an integer value. This will be like the single images that form stop-motion animations. The percentage value is how long each image should be.

Replace attribute with a specific attribute, like color, background, padding etc. Any attributes will work.

Example 1: Rainbow Username

First for a rainbow username, you need to create a keyframe:

@keyframe NAME {
    0% {color: red;}
    25% {color: yellow;}
    50% {color: green;}
    75% {color: blue;}
    100% {color: purple;}
}

Feel free to replace those colors with another color name (W3Schools), and replace NAME with any name you want!

Then you need to use that animation you just made. For site-wide username colors, you need to be an admin on that wiki and put it in MediaWiki:Common.css. Or you can use it for personal use (only you can see the animation) by putting all the code in your common.css. All the code I'm talking about here will go to either MediaWiki:Common.css or your personal common.css page.

a[href$=":USERNAME"],
a[href$="/USERNAME"] {
    color: COLOR !important;
    animation: NAME 3s infinite !important;
}

Replace COLOR with any color for fallback, NAME with the keyframe name you had earlier, 3s can be however long you want, and you can change infinite to an integer to have it stop after repeating a certain number of times. The keyword !important is necessary to override any default attributes.

Example 2: Movement Animation

Now that you know how to make color changing text, you can do a LOT more with CSS keyframe animations. Let's go through how to make a sliding movement and ratation keyframe next!

Sliding Keyframe

@keyframe NAME {
    0% {left: 0;}
    25% {left: 100;}
    50% {left: 200;}
    75% {left: 100;}
    100% {left: 0;}
}