From f79e84617fa2dc918c4bab58fde92591648796fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebasti=C3=A1n=20Weidmann?= Date: Fri, 22 May 2020 17:06:41 -0400 Subject: [PATCH 1/2] Documentation fix. The classes names in some code examples are wrong. --- docsSource/sections/02-utilities.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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; } ``` From 66ab97462797757416eed66b835c456a2f5492d0 Mon Sep 17 00:00:00 2001 From: Elton Mesquita Date: Fri, 29 May 2020 12:43:08 +0100 Subject: [PATCH 2/2] Compiled docs --- docs/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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; }