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> |
|
| "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> |
|
Customizing the animation
By default, the animations play repeatedly an unlimited number of times, with each round taking 3 seconds. Some play back and forth while others just start again. Those defaults can be overriden by setting some properties in the style="..." section of the element.
The most common thing to customize it the duration of the animation - which naturally affects how fast it plays.
| Fast jumping (0.5 second) | |
|---|---|
<div class="ua-animation ua-up" style="animation-duration:0.5s;">[[File:Ball.png|100px]]</div> |
|
| Default rate (3 seconds) | |
<div class="ua-animation ua-up">[[File:Ball.png|100px]]</div> |
|
| Slow jumping (5 seconds) | |
<div class="ua-animation ua-up" style="animation-duration:0.5s;">[[File:Ball.png|100px]]</div> |
|
Changelog
; May 10, 2021 : First created