The restart attribute is used to decide whether an animation will restart or not. The attribute is used by the <animate>, <animateColor>, <animateMotion>, <animateTransform> and <set> elements.
Syntax:
restart="always | whenNotActive | never"
Attribute Values: This attribute accepts three values as mentioned above and described below:
- always: It specifies that the animation can always be restarted.
- whenNotActive: It specifies that the animation can only be restarted when it is not active. If one tries to restart the animation during its active duration then those attempts are ignored.
- never: It specifies that the animation cannot be restarted for the time the document is loaded.
Below examples illustrate the use of this attribute:
Example 1:
HTML
<!DOCTYPE html> <html>
<body>
<div style="color: green;">
<h1>GeeksforGeeks</h1>
<svg viewBox="0 0 520 200" <rect y="30" x="10" width="60" height="60" fill="green">
<animate attributeName="x" from="10" to="50" dur="1s" repeatCount="1" restart="always" />
</rect>
<a id="geeks" style="cursor: pointer;">
<text style="font-size: 10px;" y="10">
On Clicking here, the
animation will restart
</text>
<text style="font-size: 10px;" y="20">
even if it is currently
in animation.
</text>
</a>
</svg>
</div>
<script>
document.getElementById("geeks")
.addEventListener("click", event => {
document.querySelector("animate")
.beginElement();
});
</script>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<body>
<div style="color: green;">
<h1>GeeksforGeeks</h1>
<svg viewBox="0 0 520 200" <rect y="30" x="10" width="60" height="60" fill="green">
<animate attributeName="x" from="10" to="50" dur="1s" repeatCount="1" restart="whenNotActive" />
</rect>
<a id="geeks" style="cursor: pointer;">
<text style="font-size: 10px;" y="10">
On Clicking here, the
animation will only
</text>
<text style="font-size: 10px;" y="20">
restart when it is not
currently active.
</text>
</a>
</svg>
</div>
<script>
document.getElementById("geeks")
.addEventListener("click", event => {
document.querySelector("animate")
.beginElement();
});
</script>
</body>
</html>
|
Output: