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-upua-downua-updownua-downupua-leftua-rightua-leftrightua-rightleftua-swingua-spin-clockwise(orua-spinfor short)ua-spin-counterclockwiseua-growua-shrinkua-growshrinkua-shrinkgrow
Examples
Here are a few examples. The demonstration won't work on mobile view, or if you disabled DemoScripts on your Preferences.
| Jumping | |
|---|---|
<div class="ua-animation ua-up">[[File:Ball.png|100px]]</div> |
 |
| Moving left and right | |
<div class="ua-animation ua-leftright">[[File:Ball.png|100px]]</div> |
|
| 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> |
|
| Shrink and grow | |
<div class="ua-animation ua-shrinkgrow">[[File:Ball.png|100px]]</div> |
|
| (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> |
|
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-pauseua-hover-playua-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> |
|
| Playing when hovered | |
<div class="ua-animation ua-grow ua-hover-play">[[File:Ball.png|100px]]</div> |
|
| Only activate the animation when hovered | |
<div class="ua-animation ua-grow ua-hover-only">[[File:Ball.png|100px]]</div> |
|
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> |
|
| Default rate (3 seconds) | |
<div class="ua-animation ua-up">[[File:Ball.png|100px]]</div> |
|
| Slow jumping (10 seconds) | |
<div class="ua-animation ua-up" style="animation-duration:10s;">[[File:Ball.png|100px]]</div> |
|
- 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> |
|
- 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> |
|
- 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> |
|
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> |
|
<div class="ua-animation ua-left" style="--ua-distance:500px;">[[File:Ball.png|100px]]</div> |
|
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> |
|
| Slight shrink only to 70% | |
<div class="ua-animation ua-shrink" style="--ua-scale-factor:0.7;">[[File:Ball.png|100px]]</div> |
|
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> |
|
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:
|
Okay, not bad as a start, but we should probably adjust some properties:
|
|
(to be continued...)
Changelog
- May 10, 2021
- First created