diff --git a/docs/index.html b/docs/index.html index 264bf5d..95745ed 100644 --- a/docs/index.html +++ b/docs/index.html @@ -836,7 +836,7 @@
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
- + @@ -900,7 +900,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');Even though custom properties are not supported by some aging browsers, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.
- + @@ -1026,7 +1026,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s'); } - + @@ -1048,7 +1048,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s'); </body>Even tough Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!
+Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!
All the Animate.css animations include a CSS property called animation-fill-mode
which controls the states of an element before and after animation. You can read more about it here. Animate.css defaults to animation-fill-mode: both
, but you can change it to suit your needs.
prefers-reduced-motion
media queryUnfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result.
- + @@ -1119,7 +1119,7 @@ animateCSS('.my-element', 'animate__bounce').then((message) => {If you had a hard time understanding the previous function, have a look at const, classList, arrow functions, and Promises.
- + @@ -1154,7 +1154,7 @@ animateCSS('.my-element', 'animate__bounce').then((message) => {In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the animate.compat.css
file.
Easy peasy!
- + @@ -1211,7 +1211,7 @@ $ npm installPull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.
- + @@ -1239,7 +1239,7 @@ $ npm install - + diff --git a/docsSource/compileMD.js b/docsSource/compileMD.js index 6a3a97a..644da53 100644 --- a/docsSource/compileMD.js +++ b/docsSource/compileMD.js @@ -17,7 +17,7 @@ function compileMD(dir = 'sections') { const sectionTemplate = (file, content) => { const message = 'Edit this on Github'; const fileName = file.replace('.md', '').match(/([a-z])\w+/)[0]; - const editURL = `https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/${file}`; + const editURL = `https://github.com/daneden/animate.css/blob/master/docsSource/sections/${file}`; const parsedContent = md.render(content); return ` diff --git a/docsSource/sections/03-best-practices.md b/docsSource/sections/03-best-practices.md index ba01092..b275982 100644 --- a/docsSource/sections/03-best-practices.md +++ b/docsSource/sections/03-best-practices.md @@ -28,7 +28,7 @@ Animating the `