Fandom Developers Wiki
Advertisement

This stylesheet defines a set of generic motion animations to be used on pages by just editing the page's source. While admins can access the wiki's CSS to define animations as they wish, normal users cannot. By importing this stylesheet, admins can allow normal users to add animation to elements.

These animations can be used on any page in a wiki, but they were made mainly with userpages in mind, for users who like to use code to decorate their pages.


Installation

Basic usage

The general form for defining animation on an element would be

<div class="ua-animation ua-SOME-ACTION"> SOME IMAGE OR TEXT </div>

where ua-SOME-ACTION would be replaced with one of the defined actions, for example ua-spin.

For animating one or few words inside a paragraph, <span> tags can be used instead of <div>

Only the word <span class="ua-animation ua-SOME-ACTION">hello</span> would be animated.

List of available actions

  • ua-up
  • ua-down
  • ua-updown
  • ua-downup
  • ua-left
  • ua-right
  • ua-leftright
  • ua-rightleft
  • ua-swing
  • ua-spin-clockwise (or ua-spin for short)
  • ua-spin-counterclockwise
  • ua-grow
  • ua-shrink
  • ua-growshrink
  • ua-shrinkgrow

Examples

Here are a few examples. The demonstration won't work on mobile view (switch to desktop view), or if you disabled DemoScripts on your Preferences.

Jumping
<div class="ua-animation ua-up">[[File:Ball.png|100px]]</div>
Ball.png
Moving left and right
<div class="ua-animation ua-leftright">[[File:Ball.png|100px]]</div>
Ball.png
Swinging
Let's go with <span class="ua-animation ua-swing">words</span> this time.
Let's go with words this time.
Spinning
<div class="ua-animation ua-spin">[[File:Ball.png|100px]]</div>
Ball.png
Shrink and grow
<div class="ua-animation ua-shrinkgrow">[[File:Ball.png|100px]]</div>
Ball.png
(This example belongs to the #Advanced usage section, which is yet to be written)
"Free" animation of some properties -
currently CSS transformations and relative positionning of top and left
<div class="ua-animation ua-toandback" style="transform:scale(1.5) rotate(180deg); left:-200px; top:-200px;">[[File:Ball.png|100px]]</div>
Ball.png


Hover effects

Beside the list of classes related to the various actions, there are three additional classes that can make the animation controlled by mouse hover.

  • ua-hover-pause
  • ua-hover-play
  • ua-hover-only

ua-hover-pause causes the animation to pause when the user hovers over the element with the mouse cursor. Once the cursor moves away, it will continue from the point it was.

ua-hover-play causes the animation to only play when the user hovers over the element, and pause each time the cursor moves away. Again, it will keep the point it was on.

ua-hover-only causes the animation to be entirely disabled until the user hovers over the element. Once the cursor moves away, the element will immediately return to it's initial state. When hovered again, it will start from the beginning.

Here is a demonstration. Hover over the element to see the effect:

Pausing when hovered
<div class="ua-animation ua-grow ua-hover-pause">[[File:Ball.png|100px]]</div>
Ball.png
Playing when hovered
<div class="ua-animation ua-grow ua-hover-play">[[File:Ball.png|100px]]</div>
Ball.png
Only activate the animation when hovered
<div class="ua-animation ua-grow ua-hover-only">[[File:Ball.png|100px]]</div>
Ball.png


Customizing the animation

Customizing animation properties

By default, the animations of UserAnimations play repeatedly, with each round taking 3 seconds. Those defaults can be overriden by setting some properties in the style="..." section of the element.


Animation-duration

The most common thing to customize is probably the duration of the animation - which naturally affects how fast it plays. This can be done by setting the animation-duration property. Here is a demonstration:

Fast jumping (0.2 second)
<div class="ua-animation ua-up" style="animation-duration:0.2s;">[[File:Ball.png|100px]]</div>
Ball.png
Default rate (3 seconds)
<div class="ua-animation ua-up">[[File:Ball.png|100px]]</div>
Ball.png
Slow jumping (10 seconds)
<div class="ua-animation ua-up" style="animation-duration:10s;">[[File:Ball.png|100px]]</div>
Ball.png


Animation-iteration-count

By setting the animation-iteration-count property, it is possible to limit the number of times the animation plays. For example:

Setting the animation to 3 iterations
<div class="ua-animation ua-downup" style="animation-iteration-count:3;">[[File:Ball.png|100px]]</div>
Ball.png


Animation-delay

The animation-delay property adds a delay before the animation starts playing. For example:

Adding a two-seconds delay
<div class="ua-animation ua-spin" style="animation-delay:2s;">[[File:Ball.png|100px]]</div>
Ball.png


Transform-origin

The transform-origin property is not specifically related to animations, but it affects the transformations which are used for the animations in this stylesheet. The property can set the "pinning point" of the change, which is by default in the center of the element, to another point. It has no effect on simple movements like up or right, but it has a clear effect on other changes. Here is a demonstration:

Spinning around the upper-left corner
<div class="ua-animation ua-spin" style="transform-origin:0 0;">[[File:Ball.png|100px]]</div>
Ball.png


There are other animation-related properties (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations), but customizing them would require a deeper understanding of how CSS animations work and what are the default settings provided by this stylesheet.


A note about combining properties: Each element has only one style section for all properties. When combining several properties, separate them with a semicolon. For example:

<div class="ua-animation ua-right" style="animation-duration:10s; animation-delay:20s; animation-iteration-count:5;">


Changing movement distance

The distance of motions like ua-up, ua-right etc. is defined by default to be 100% of the elements width or height. That means, if the element is 50 pixels wide it will move 50 pixels to the right. It is possible to set another distance by setting the CSS variable --ua-distance. This is done in the style section as well. For example:

<div class="ua-animation ua-up" style="--ua-distance:300%;">[[File:Ball.png|100px]]</div>
Ball.png
<div class="ua-animation ua-left" style="--ua-distance:500px;">[[File:Ball.png|100px]]</div>
Ball.png

It worths noting that this will not work for some older browsers, most notably Internet Explorer. However Fandom in general is not really compatible with those browsers...


Changing scale factors for grow/shrink

Similar to movement distance, it is possible to change the scale factor for grow or shrink by setting the --ua-distance CSS variable. For example:

Grow by X10
<div class="ua-animation ua-grow" style="--ua-scale-factor:10;">[[File:Ball.png|100px]]</div>
Ball.png
Slight shrink only to 70%
<div class="ua-animation ua-shrink" style="--ua-scale-factor:0.7;">[[File:Ball.png|100px]]</div>
Ball.png


For ua-growshrink and ua-shrinkgrow, the factor is either added or subtracted from 1. For example:

Scale by +/- 80%
<div class="ua-animation ua-growshrink" style="--ua-scale-factor:0.8;">[[File:Ball.png|100px]]</div>
Ball.png

The default values are 2 for grow, 0.1 for shrink, and 0.5 for growshrink or shrinkgrow.


Advanced usage

Combining multiple effects

Combining multiple effects is not possible by using multiple classes on the same element (this would lead to only one animation applied, possibly with wrong properties), but it is possible by nesting elements.

For example, let's assume we want our lovely demo ball to look like someone actually kicked it, and not just a normal kick — a spin kick. That includes multiple motions at the same time — it should both move up, move to the side, and spin.

For this, we will need to nest 3 elements one inside the other:

Ball.png

Okay, not bad as a start, but we should probably adjust some properties:

Ball.png

(to be continued...)


Changelog

May 10, 2021
First created
Text above can be found here (edit)
Advertisement