CSS Animations — coding help

FYI: This code doesn't work in the comments.
It also won't work in your sandbox or talk page.
To test your code, please go to your common.css.

Quick Code

Copy to clipboard

a[href$=":USERNAME"], a[href$="/USERNAME"] { color: dodgerblue !important; text-shadow: 0 0 5px pink !important; } /* Replace USERNAME with your username. */

Introduction

CSS Animations are made by first predefining what the animation will look like, then creating a tag that puts in the animation.

NOTE: If you are an Administrator on a wiki, you can edit the CSS, put this code there, and then apply the actual tags to a wiki page. If not, you won't be able to use this CSS on the wiki unless you apply it to your common.css (Special:MyPage/common.css). Our wiki currently only allows staff to have animated/colored/font usernames, so please don't ask if you can have one! If you're an Admin/Bureaucrat on another wiki, you can use the below code to change your username color/font for the entire wiki:

a[href$=":USERNAME"],
a[href$="/USERNAME"] {
    color: COLOR !important;
    /* ATTRIBUTES HERE */
}

Make sure to add Attributes or an animation, just like the above code was the tag you'll create later on this page! Replace USERNAME with the username you want the styles on, and COLOR with a color.

Step One: Creating the CSS

If you're in an HTML document, you'll want to use the <head> and <style> tags to define a CSS stylesheet, so see our HTML page for more detail on that!

To start, you'll want to type in the below code:

@keyframes NAME {
    
}

Replace the NAME with what you want the animation to be called. Now, let's define the animation.

2-Part Animations

2-Part Animations are the most simple type of animation. To make them, update your code from the first example as follows:

@keyframes NAME {
    from {attribute: specification; attribute: specification;}
    to {attribute: specification; attribute: specification;}
}

Replace the attribute: specification; attribute: specification; with actual CSS Attributes (see our CSS page and our Attributes page).

Multi-Part Animations

Multi-Part animations are made in a similar way to 2-part animations, but they use percentages instead of "To" and "From" specifications. To make them, update your code from the first example as follows:

@keyframes NAME {
    _% {attribute: specification; attribute: specification;}
    _% {attribute: specification; attribute: specification;}
    _% {attribute: specification; attribute: specification;}
}

Replace the blanks with a number between 0 and 100. Replace the attribute: specification; attribute: specification; with actual CSS Attributes (see our CSS page and our Attributes page).
0% is how the animation begin, and 100% is when the animation finish.

Step 2: Creating the Animation Tag

Now that you've made the animation, you'll want to actually make a tag that includes it, so you can actually use the animation. To do this, type in the following below your previous code:

TAGNAME {
  animation-name:NAME;  
  animation-duration: _s;
  animation-delay:_s;
  animation-iteration-count: infinite/__;
}

First, replace the TAGNAME with a name of your choice. This will be the <name> of the tag you type in!

Then, replace the NAME with the original NAME of your @keyframes animation.

Next, replace the blank in the '_s' with a number. For the first, this will be how long the animation takes to complete. For the second, it will be how many seconds to wait before the animation plays (this is optional)

Finally, replace the 'infinite/_' with either infinite, meaning your animation will just play again and again forever, or a number of your choice.

NOTE: You can also insert more attributes into this bit of CSS code if you wish!

Step 3: Inserting the Animation

Finally, you have to insert the animation! You can do this by typing in the following after all of the CSS code (This is now in HTML, close the <head> and <style> tags, for administrators editing wiki CSS, this code should now be on a page, not in the CSS!):

<NAME>Animation content</NAME>

Replace the <NAME> with the name of the animation, insert the animation content, and you're good to go! If you want to do some last-minute styling, go back to step 2 and add some more attributes to the block of CSS.

Imported Animations

You can import some animations in the CSS of your wiki. An example is UserAnimations.