diff --git a/docs/index.html b/docs/index.html
index d439861..666cd91 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -982,12 +982,12 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
The animate__animated
class has a default speed of 1s
. You can also customize the animations duration through the --animate-duration
property, globaly or locally. This will affect both the animations and the utility classes. Example:
/* All animations will take twice as long to finish */
:root {
- --animation-duration: 2s;
+ --animate-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
- --animation-duration: 0.5s;
+ --animate-duration: 0.5s;
}
Notice that some animations have a duration of less than 1 second. As we used the CSS calc()
function, setting the duration through the --animation-duration
property will respect these ratios. So, when you change the global duration all the animations will respond to that change!
@@ -1022,7 +1022,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
It's better to set this property only locally and not globally or
you might end up with a messy situation */
.my-element {
- --animation-repeat: 2;
+ --animate-repeat: 2;
}
diff --git a/docsSource/sections/02-utilities.md b/docsSource/sections/02-utilities.md
index b8d0f3e..02df3fa 100644
--- a/docsSource/sections/02-utilities.md
+++ b/docsSource/sections/02-utilities.md
@@ -53,12 +53,12 @@ The `animate__animated` class has a default speed of `1s`. You can also customiz
```css
/* All animations will take twice as long to finish */
:root {
- --animation-duration: 2s;
+ --animate-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
- --animation-duration: 0.5s;
+ --animate-duration: 0.5s;
}
```
@@ -85,6 +85,6 @@ As with the repeat and speed classes, the `animate__repeat` class is based on th
It's better to set this property only locally and not globally or
you might end up with a messy situation */
.my-element {
- --animation-repeat: 2;
+ --animate-repeat: 2;
}
```