Robot
/
animate.css
mirror of https://github.com/animate-css/animate.css.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'SWatchmaker-patch-1'

This commit is contained in:
Elton Mesquita 2020-05-29 12:43:24 +01:00
parent 92f2e1acce 66ab974627
commit 95031bb49b
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/index.html
View File

@ -982,12 +982,12 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
<p>The <code>animate__animated</code> class has a default speed of <code>1s</code>. You can also customize the animations duration through the <code>--animate-duration</code> property, globaly or locally. This will affect both the animations and the utility classes. Example:</p> <p>The <code>animate__animated</code> class has a default speed of <code>1s</code>. You can also customize the animations duration through the <code>--animate-duration</code> property, globaly or locally. This will affect both the animations and the utility classes. Example:</p>
<pre><code class="language-css">/* All animations will take twice as long to finish */ <pre><code class="language-css">/* All animations will take twice as long to finish */
:root { :root {
--animation-duration: 2s; --animate-duration: 2s;
} }
/* Only this element will take half the time to finish */ /* Only this element will take half the time to finish */
.my-element { .my-element {
--animation-duration: 0.5s; --animate-duration: 0.5s;
} }
</code></pre> </code></pre>
<p>Notice that some animations have a duration of less than 1 second. As we used the CSS <code>calc()</code> function, setting the duration through the <code>--animation-duration</code> property will respect these ratios. So, when you change the global duration all the animations will respond to that change!</p> <p>Notice that some animations have a duration of less than 1 second. As we used the CSS <code>calc()</code> function, setting the duration through the <code>--animation-duration</code> property will respect these ratios. So, when you change the global duration all the animations will respond to that change!</p>
@ -1022,7 +1022,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
It's better to set this property only locally and not globally or It's better to set this property only locally and not globally or
you might end up with a messy situation */ you might end up with a messy situation */
.my-element { .my-element {
--animation-repeat: 2; --animate-repeat: 2;
} }
</code></pre> </code></pre>

6
docsSource/sections/02-utilities.md
View File

@ -53,12 +53,12 @@ The `animate__animated` class has a default speed of `1s`. You can also customiz
```css ```css
/* All animations will take twice as long to finish */ /* All animations will take twice as long to finish */
:root { :root {
--animation-duration: 2s; --animate-duration: 2s;
} }
/* Only this element will take half the time to finish */ /* Only this element will take half the time to finish */
.my-element { .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 It's better to set this property only locally and not globally or
you might end up with a messy situation */ you might end up with a messy situation */
.my-element { .my-element {
--animation-repeat: 2; --animate-repeat: 2;
} }
``` ```