View source for Template:Animation/doc

{{Documentation}}

This template displays an animation using multiple images as frames.

The template uses CSS to shuffle between images like a film strip.

Generally, it is more preferrable to use animated WebP or GIF instead.

== Usage ==
=== Basic ===
<syntaxhighlight lang="wikitext">
{{Animation
|fps=4
|size=80px
|acerth_down_walk_0 - evocreo2.png
|acerth_down_walk_1 - evocreo2.png
}}
</syntaxhighlight>

{{Animation
|fps=4
|size=80px
|acerth_down_walk_0 - evocreo2.png
|acerth_down_walk_1 - evocreo2.png
}}

=== Changing container size ===
<syntaxhighlight lang="wikitext">
{{Animation
|fps=4
|size=80px
|width=40px
|height=40px
|acerth_down_walk_0 - evocreo2.png
|acerth_down_walk_1 - evocreo2.png
}}
</syntaxhighlight>

{{Animation
|fps=4
|size=80px
|width=40px
|height=40px
|acerth_down_walk_0 - evocreo2.png
|acerth_down_walk_1 - evocreo2.png
}}

=== Offseting frame position ===
<syntaxhighlight lang="wikitext">
{{Animation
|fps=4
|size=80px
|width=40px
|height=40px
|offsetTop = -4px
|offsetLeft = -1px
|offsetRight = -2px
|offsetBottom = 1px
|acerth_down_walk_0 - evocreo2.png
|acerth_down_walk_1 - evocreo2.png
}}
</syntaxhighlight>

{{Animation
|fps=4
|size=80px
|width=40px
|height=40px
|offsetTop = -4px
|offsetLeft = -1px
|offsetRight = -2px
|offsetBottom = 1px
|acerth_down_walk_0 - evocreo2.png
|acerth_down_walk_1 - evocreo2.png
}}

== TemplateData ==
<templatedata>
{
	"params": {
		"1": {
			"label": "Frame 1",
			"description": "Image for the first frame",
			"type": "wiki-file-name",
			"required": true,
			"example": "acerth_down_walk_0 - evocreo2.png"
		},
		"2": {
			"label": "Frame 2",
			"description": "Image for the second frame",
			"type": "wiki-file-name",
			"required": true,
			"example": "acerth_down_walk_1 - evocreo2.png"
		},
		"size": {
			"label": "Size",
			"description": "Size of the image",
			"example": "80px",
			"type": "string",
			"default": "80px"
		},
		"fps": {
			"label": "FPS",
			"description": "FPS of the animation",
			"example": "12",
			"type": "number",
			"default": "12"
		},
		"width": {
			"label": "Container width",
			"description": "The width of the container containing the frame. This is useful for clipping whitespace from the animation. Default to the size parameter.",
			"example": "40px",
			"type": "string"
		},
		"height": {
			"label": "Container height",
			"description": "The height of the container containing the frame. This is useful for clipping whitespace from the animation. Default to the size parameter.",
			"example": "40px",
			"type": "string"
		},
		"offsetTop": {
			"label": "Top offset",
			"description": "Top position offset for the frame",
			"example": "-2px",
			"type": "string",
			"default": "0"
		},
		"offsetBottom": {
			"label": "Bottom offset",
			"description": "Bottom position offset for the frame",
			"example": "-2px",
			"type": "string",
			"default": "0"
		},
		"offsetLeft": {
			"label": "Left offset",
			"description": "Left position offset for the frame",
			"example": "-2px",
			"type": "string",
			"default": "0"
		},
		"offsetRight": {
			"label": "Right offset",
			"description": "Right position offset for the frame",
			"example": "-2px",
			"type": "string",
			"default": "0"
		}
	},
	"description": "Displays an animation using multiple images as frames",
	"paramOrder": [
		"1",
		"2",
		"size",
		"fps",
		"width",
		"height",
		"offsetTop",
		"offsetBottom",
		"offsetLeft",
		"offsetRight"
	],
	"format": "inline"
}
</templatedata>

<includeonly>
[[Category:Templates]]
</includeonly>