Add a missing word in the custom build section of the documentation (#1681)

typo fixed

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,35 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
----
-
-**Describe the bug** A clear and concise description of what the bug is.
-
-**To Reproduce** Steps to reproduce the behavior:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior** A clear and concise description of what you expected to happen.
-
-**Screenshots** If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
-
-- OS: [e.g. iOS]
-- Browser [e.g. chrome, safari]
-- Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
-
-- Device: [e.g. iPhone6]
-- OS: [e.g. iOS8.1]
-- Browser [e.g. stock browser, safari]
-- Version [e.g. 22]
-
-**Additional context** Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bugs.yml

@@ -0,0 +1,74 @@
+name: Report a Bug
+description: Found a bug? Let us know!
+labels: 'bug'
+body:
+# bug description
+- type: textarea
+  id: descrption
+  attributes:
+    label: Describe The Bug
+    description: "A clear and concise description of what the bug is."
+  validations:
+    required: true
+# steps to reproduce
+- type: textarea
+  id: steps
+  attributes:
+    label: Steps To Reproduce
+    description: "Steps to reproduce the behavior."
+    placeholder: |
+      1. Go to '...'
+      2. Click on '....'
+      3. Scroll down to '....'
+      4. See error
+  validations:
+    required: false
+# expected behavior
+- type: textarea
+  id: expected
+  attributes:
+    label: Expected Behavior
+    description: "A clear and concise description of what you expected to happen."
+  validations:
+    required: false
+# screenshots
+- type: textarea
+  id: screenshots
+  attributes:
+    label: Screenshots
+    description: "If applicable, add screenshots to help explain your problem."
+  validations:
+    required: false
+# desktop
+- type: textarea
+  id: desktop
+  attributes:
+    label: Desktop
+    description: "Please complete the following information."
+    placeholder: |
+      - OS: [e.g. iOS]
+      - Browser [e.g. chrome, safari]
+      - Version [e.g. 22]
+  validations:
+    required: false
+# smartphone
+- type: textarea
+  id: mobile
+  attributes:
+    label: Smartphone
+    description: "Please complete the following information."
+    placeholder: |
+      - Device: [e.g. iPhone6]
+      - OS: [e.g. iOS8.1]
+      - Browser [e.g. stock browser, safari]
+      - Version [e.g. 22]
+  validations:
+    required: false
+# additional context
+- type: textarea
+  id: additional-context
+  attributes:
+    label: Additional Context
+    description: "Add any other context about the problem here."
+  validations:
+    required: false

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,15 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
----
-
-**Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like** A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context** Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/features.yml

@@ -0,0 +1,36 @@
+name: Feature Request
+description: Have a feature request? Let us know!
+labels: 'feature request'
+body:
+# problem
+- type: textarea
+  id: problem
+  attributes:
+    label: Is your feature request related to a problem? Please describe.
+    description: "A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]"
+  validations:
+    required: true
+# solution
+- type: textarea
+  id: solution
+  attributes:
+    label: Describe the solution you'd like.
+    description: "A clear and concise description of what you want to happen."
+  validations:
+    required: true
+# alternative
+- type: textarea
+  id: alternative
+  attributes:
+    label: Describe alternatives you've considered.
+    description: "A clear and concise description of any alternative solutions or features you've considered."
+  validations:
+    required: true
+# additional context
+- type: textarea
+  id: additional-context
+  attributes:
+    label: Additional Context
+    description: "Add any other context about the problem here."
+  validations:
+    required: false

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '20 21 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

CODE_OF_CONDUCT.md

@@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at callmeelton@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at animate@eltonmesquita.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
 

CONTRIBUTING.md

@@ -12,7 +12,7 @@ The animations in Animate.css should follow a few key principles:
 - **Animations should be tolerable.** Related to subtlety, animations should be tolerable—seeing them repeatedly should not become too annoying or overbearing.
 - **Animations should not interfere with document flow or control/input availability.** In other words, the absence of an animation should never reduce usability of a product: they should be non-critical and seen as “progressive enhancements”. Avoid animations that change properties such as `position` or `display`.
 - **Animations should be helpful.** They should be designed to guide users to a point of interest, ease natural reading order, or to communicate relationships between elements.
-- **Animations should feel familial.** Avoid introducing animations that feel out-of-place compared to the existing set.
+- **Animations should feel familiar.** Avoid introducing animations that feel out-of-place compared to the existing set.
 - **Animations should feel natural.** Animations should reflect, as much as is reasonable, motion that occurs in natural physics. Avoid extreme timing functions, and model animations on real-world events.
 
 ## Code Styling
@@ -27,5 +27,5 @@ The animations in Animate.css should follow a few key principles:
 1. [Fork](https://help.github.com/articles/fork-a-repo/) the project
 2. Create a new topic branch on your local forked copy
 3. Push your topic branch up to your fork
-4. Create a [pen](https://codepen.io/) demonstrating what yor change will do.
+4. Create a [pen](https://codepen.io/) demonstrating what your change will do.
 5. [Open a Pull Request](https://help.github.com/articles/about-pull-requests/) with a clear title and description against the `main` branch.

LICENSE

@@ -1,21 +1,33 @@
-The MIT License (MIT)
+Animate.css Copyright 2021 Daniel Eden (“Licensor”)
 
-Copyright (c) 2020 Daniel Eden
+Hippocratic License Version Number: 2.1.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Purpose. The purpose of this License is for the Licensor named above to permit the Licensee (as defined below) broad permission, if consistent with Human Rights Laws and Human Rights Principles (as each is defined below), to use and work with the Software (as defined below) within the full scope of Licensor’s copyright and patent rights, if any, in the Software, while ensuring attribution and protecting the Licensor from liability.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+Permission and Conditions. The Licensor grants permission by this license (“License”), free of charge, to the extent of Licensor’s rights under applicable copyright and patent law, to any person or entity (the “Licensee”) obtaining a copy of this software and associated documentation files (the “Software”), to do everything with the Software that would otherwise infringe (i) the Licensor’s copyright in the Software or (ii) any patent claims to the Software that the Licensor can license or becomes able to license, subject to all of the following terms and conditions:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+* Acceptance. This License is automatically offered to every person and entity subject to its terms and conditions. Licensee accepts this License and agrees to its terms and conditions by taking any action with the Software that, absent this License, would infringe any intellectual property right held by Licensor.
+
+* Notice. Licensee must ensure that everyone who gets a copy of any part of this Software from Licensee, with or without changes, also receives the License and the above copyright notice (and if included by the Licensor, patent, trademark and attribution notice). Licensee must cause any modified versions of the Software to carry prominent notices stating that Licensee changed the Software. For clarity, although Licensee is free to create modifications of the Software and distribute only the modified portion created by Licensee with additional or different terms, the portion of the Software not modified must be distributed pursuant to this License. If anyone notifies Licensee in writing that Licensee has not complied with this Notice section, Licensee can keep this License by taking all practical steps to comply within 30 days after the notice. If Licensee does not do so, Licensee’s License (and all rights licensed hereunder) shall end immediately.
+
+* Compliance with Human Rights Principles and Human Rights Laws.
+
+    1. Human Rights Principles.
+
+        (a) Licensee is advised to consult the articles of the United Nations Universal Declaration of Human Rights and the United Nations Global Compact that define recognized principles of international human rights (the “Human Rights Principles”). Licensee shall use the Software in a manner consistent with Human Rights Principles.
+
+        (b) Unless the Licensor and Licensee agree otherwise, any dispute, controversy, or claim arising out of or relating to (i) Section 1(a) regarding Human Rights Principles, including the breach of Section 1(a), termination of this License for breach of the Human Rights Principles, or invalidity of Section 1(a) or (ii) a determination of whether any Law is consistent or in conflict with Human Rights Principles pursuant to Section 2, below, shall be settled by arbitration in accordance with the Hague Rules on Business and Human Rights Arbitration (the “Rules”); provided, however, that Licensee may elect not to participate in such arbitration, in which event this License (and all rights licensed hereunder) shall end immediately. The number of arbitrators shall be one unless the Rules require otherwise.
+
+        Unless both the Licensor and Licensee agree to the contrary: (1) All documents and information concerning the arbitration shall be public and may be disclosed by any party; (2) The repository referred to under Article 43 of the Rules shall make available to the public in a timely manner all documents concerning the arbitration which are communicated to it, including all submissions of the parties, all evidence admitted into the record of the proceedings, all transcripts or other recordings of hearings and all orders, decisions and awards of the arbitral tribunal, subject only to the arbitral tribunal's powers to take such measures as may be necessary to safeguard the integrity of the arbitral process pursuant to Articles 18, 33, 41 and 42 of the Rules; and (3) Article 26(6) of the Rules shall not apply.
+
+    2. Human Rights Laws. The Software shall not be used by any person or entity for any systems, activities, or other uses that violate any Human Rights Laws.  “Human Rights Laws” means any applicable laws, regulations, or rules (collectively, “Laws”) that protect human, civil, labor, privacy, political, environmental, security, economic, due process, or similar rights; provided, however, that such Laws are consistent and not in conflict with Human Rights Principles (a dispute over the consistency or a conflict between Laws and Human Rights Principles shall be determined by arbitration as stated above).  Where the Human Rights Laws of more than one jurisdiction are applicable or in conflict with respect to the use of the Software, the Human Rights Laws that are most protective of the individuals or groups harmed shall apply.
+
+    3. Indemnity. Licensee shall hold harmless and indemnify Licensor (and any other contributor) against all losses, damages, liabilities, deficiencies, claims, actions, judgments, settlements, interest, awards, penalties, fines, costs, or expenses of whatever kind, including Licensor’s reasonable attorneys’ fees, arising out of or relating to Licensee’s use of the Software in violation of Human Rights Laws or Human Rights Principles.
+
+* Failure to Comply. Any failure of Licensee to act according to the terms and conditions of this License is both a breach of the License and an infringement of the intellectual property rights of the Licensor (subject to exceptions under Laws, e.g., fair use). In the event of a breach or infringement, the terms and conditions of this License may be enforced by Licensor under the Laws of any jurisdiction to which Licensee is subject. Licensee also agrees that the Licensor may enforce the terms and conditions of this License against Licensee through specific performance (or similar remedy under Laws) to the extent permitted by Laws. For clarity, except in the event of a breach of this License, infringement, or as otherwise stated in this License, Licensor may not terminate this License with Licensee.
+
+* Enforceability and Interpretation. If any term or provision of this License is determined to be invalid, illegal, or unenforceable by a court of competent jurisdiction, then such invalidity, illegality, or unenforceability shall not affect any other term or provision of this License or invalidate or render unenforceable such term or provision in any other jurisdiction; provided, however, subject to a court modification pursuant to the immediately following sentence, if any term or provision of this License pertaining to Human Rights Laws or Human Rights Principles is deemed invalid, illegal, or unenforceable against Licensee by a court of competent jurisdiction, all rights in the Software granted to Licensee shall be deemed null and void as between Licensor and Licensee. Upon a determination that any term or provision is invalid, illegal, or unenforceable, to the extent permitted by Laws, the court may modify this License to affect the original purpose that the Software be used in compliance with Human Rights Principles and Human Rights Laws as closely as possible. The language in this License shall be interpreted as to its fair meaning and not strictly for or against any party.
+
+* Disclaimer. TO THE FULL EXTENT ALLOWED BY LAW, THIS SOFTWARE COMES “AS IS,” WITHOUT ANY WARRANTY, EXPRESS OR IMPLIED, AND LICENSOR AND ANY OTHER CONTRIBUTOR SHALL NOT BE LIABLE TO ANYONE FOR ANY DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THIS LICENSE, UNDER ANY KIND OF LEGAL CLAIM.
+
+This Hippocratic License is an Ethical Source license (https://ethicalsource.dev) and is offered for use by licensors and licensees at their own risk, on an “AS IS” basis, and with no warranties express or implied, to the maximum extent permitted by Laws.

README.md

@@ -1,6 +1,6 @@
 # Animate.css
 
-[![GitHub Version](https://img.shields.io/github/release/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/releases) [![Github Star](https://img.shields.io/github/stars/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/stargazers) [![Github Fork](https://img.shields.io/github/forks/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/network/members) [![License](https://img.shields.io/github/license/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/blob/main/LICENSE)
+[![GitHub Version](https://img.shields.io/github/release/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/releases) [![Github Star](https://img.shields.io/github/stars/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/stargazers) [![Github Fork](https://img.shields.io/github/forks/animate-css/animate.css.svg?style=for-the-badge)](https://github.com/animate-css/animate.css/network/members) [![License](https://img.shields.io/badge/license-hippocratic%20license-orange.svg?longCache=true&style=for-the-badge)](https://github.com/animate-css/animate.css/blob/main/LICENSE)
 
 > If you need the old docs - v3.x.x and under - you can find it [here](https://github.com/animate-css/animate.css/tree/a8d92e585b1b302f7749809c3308d5e381f9cb17).
 
@@ -20,7 +20,7 @@ Install with yarn:
 yarn add animate.css
 ```
 
-## Getting started
+## Getting Started
 
 You can find the Animate.css documentation on the [website](https://animate.style/).
 
@@ -28,7 +28,7 @@ You can find the Animate.css documentation on the [website](https://animate.styl
 
 Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
 
-## Core team
+## Core Team
 
 | ![Daniel Eden](https://avatars2.githubusercontent.com/u/439365?s=460&u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&v=4) | ![Elton Mesquita](https://avatars2.githubusercontent.com/u/5007208?s=460&u=418401ee605824272e5dcb955fd64ea24546a857&v=4) | ![Waren Gonzaga](https://avatars1.githubusercontent.com/u/15052701?s=460&u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&v=4) |
 | --- | --- | --- |
@@ -37,11 +37,11 @@ Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.o
 
 ## License
 
-Animate.css is licensed under the MIT license. <https://opensource.org/licenses/MIT>
+Animate.css is licensed under the [Hippocratic License](http://firstdonoharm.dev).
 
 ## Code of Conduct
 
-This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
+This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [animate@eltonmesquita.com](mailto:animate@eltonmesquita.com).
 
 ## Contributing
 

SECURITY.md

@@ -0,0 +1,5 @@
+<!-- markdownlint-disable MD041 -->
+
+If you discover a security issue in this repository, please contact us with this email animate@eltonmesquita.com.
+
+Thanks for helping make our open-source projects safe for everyone, we really appreciate it.

animate.css

@@ -1,9 +1,11 @@
-@charset "UTF-8";/*!
+
+@charset "UTF-8";
+/*!
  * animate.css - https://animate.style/
  * Version - 4.1.1
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
  *
- * Copyright (c) 2021 Animate.css
+ * Copyright (c) 2022 Animate.css
  */
 :root {
   --animate-duration: 1s;

docs/index.html

@@ -48,7 +48,7 @@
   <body>
 
     <!-- Fork Corner -->
-    <a href="https://github.com/animate-css/animate.css" target="_blank" id="fork-corner" class="fork-corner fc-size-small fc-pos-tl fc-animate-default fc-theme-github"></a>
+    <a href="https://github.com/animate-css/animate.css" target="_blank" id="fork-corner" class="fork-corner fc-size-small fc-pos-tl fc-animate-grow fc-theme-github"></a>
 
     <article class="intro">
       <section class="callout">
@@ -60,6 +60,20 @@
       </section>
 
       <section class="animation-list">
+        <label for="night-light-checkbox" class="night-light-label">
+          <input type="checkbox" id="night-light-checkbox" />
+          <span class="night-light-ball"></span>
+          <svg viewBox="0 0 512 512" class="sun-svg">
+            <path id="sun-svg"
+              d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z">
+            </path>
+          </svg>
+          <svg viewBox="0 0 512 512" class="moon-svg">
+            <path id="moon-svg"
+              d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z">
+            </path>
+          </svg>
+        </label>
         <button class="callout-hideList button">Close list</button>
         
       <section class="attention_seekers" id="attention_seekers">
@@ -868,15 +882,18 @@
     
 
       <section class="docSection-usage" id="usage">
-        <h2>Installation and usage</h2>
+        <h2>Installation and Usage</h2>
 <h3>Installing</h3>
 <p>Install with npm:</p>
 <pre><code class="language-shell">$ npm install animate.css --save
 </code></pre>
-<p>with yarn:</p>
+<p>Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. If you are not using any tool for packing or bundling your code, you can simply use the CDN method below):</p>
 <pre><code class="language-shell">$ yarn add animate.css
 </code></pre>
-<p>or add it directly to your webpage using a CDN:</p>
+<p>Import it into your file:</p>
+<pre><code class="language-js">import 'animate.css';
+</code></pre>
+<p>Or add it directly to your webpage using a CDN:</p>
 <pre><code class="language-html">&lt;head&gt;
   &lt;link
     rel=&quot;stylesheet&quot;
@@ -893,7 +910,7 @@
 <p>Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the <a href="#best-practices">best practices</a> and <a href="#gotchas">gotchas</a> sections to bring your web-things to life in the best way possible.</p>
 </blockquote>
 <h4>Using <code>@keyframes</code></h4>
-<p>Even though the library provides you a few helper classes like the <code>animated</code> class to get you up running quickly, you can use the provided animations <code>keyframes</code> directly. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.</p>
+<p>Even though the library provides you a few helper classes like the <code>animated</code> class to get you up running quickly, you can directly use the provided animations <code>keyframes</code>. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.</p>
 <p>Example:</p>
 <pre><code class="language-css">.my-element {
   display: inline-block;
@@ -905,7 +922,7 @@
 </code></pre>
 <p>Be aware that some animations are dependent on the <code>animation-timing</code> property set on the animation's class. Changing or not declaring it might lead to unexpected results.</p>
 <h4>CSS Custom Properties (CSS Variables)</h4>
-<p>Since version 4, Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and iteractions. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value to globally or locally.</p>
+<p>Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value globally or locally.</p>
 <p>Example:</p>
 <pre><code class="language-css">/* This only changes this particular animation duration */
 .animate__animated.animate__bounce {
@@ -918,21 +935,21 @@
   --animate-delay: 0.9s;
 }
 </code></pre>
-<p>Custom properties also make it easy to change all your animations time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:</p>
+<p>Custom properties also make it easy to change all your animation's time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:</p>
 <pre><code class="language-javascript">// All animations will take twice the time to accomplish
 document.documentElement.style.setProperty('--animate-duration', '2s');
 
 // All animations will take half the time to accomplish
 document.documentElement.style.setProperty('--animate-duration', '.5s');
 </code></pre>
-<p>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.</p>
+<p>Even though some aging browsers do not support custom properties, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.</p>
 
         <p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
       </section>
     
 
       <section class="docSection-utilities" id="utilities">
-        <h2>Utility classes</h2>
+        <h2>Utility Classes</h2>
 <p>Animate.css comes packed with a few utility classes to simplify its use.</p>
 <h3>Delay classes</h3>
 <p>You can add delays directly on the element's class attribute, just like this:</p>
@@ -1017,7 +1034,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
   --animate-duration: 0.5s;
 }
 </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>
 <h3>Repeating classes</h3>
 <p>You can control the iteration count of the animation by adding these classes, like below:</p>
 <pre><code class="language-html">&lt;div class=&quot;animate__animated animate__bounce animate__repeat-2&quot;&gt;Example&lt;/div&gt;
@@ -1056,14 +1073,14 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
   --animate-repeat: 2;
 }
 </code></pre>
-<p>Notice that <code>animate__infinite</code> doesn't use any custom property and changes to <code>--animate-repeat</code> will have no effect on it. Don't forget to read the <a href="#best-practices">best practices</a> section to make the best use of repeating animations.</p>
+<p>Notice that <code>animate__infinite</code> doesn't use any custom property, and changes to <code>--animate-repeat</code> will have no effect. Don't forget to read the <a href="#best-practices">best practices</a> section to make the best use of repeating animations.</p>
 
         <p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
       </section>
     
 
       <section class="docSection-best-practices" id="best-practices">
-        <h2>Best practices</h2>
+        <h2>Best Practices</h2>
 <p>Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.</p>
 <h3>Meaningful animations</h3>
 <p>You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring &quot;flashiness&quot; to it.</p>
@@ -1082,7 +1099,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
 <h3>Infinite animations should be avoided</h3>
 <p>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!</p>
 <h3>Mind the initial and final state of your elements</h3>
-<p>All the Animate.css animations include a CSS property called <code>animation-fill-mode</code> which controls the states of an element before and after animation. You can read more about it <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode">here</a>. Animate.css defaults to <code>animation-fill-mode: both</code>, but you can change it to suit your needs.</p>
+<p>All the Animate.css animations include a CSS property called <code>animation-fill-mode</code>, which controls the states of an element before and after animation. You can read more about it <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode">here</a>. Animate.css defaults to <code>animation-fill-mode: both</code>, but you can change it to suit your needs.</p>
 <h3>Don't disable the <code>prefers-reduced-motion</code> media query</h3>
 <p>Since version 3.7.0 Animate.css supports the <code>prefers-reduced-motion</code> media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a <strong>critical accessibility feature</strong> and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it <a href="https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/">here</a>. If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:</p>
 <p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="eltonmesquita" data-slug-hash="oNjGGbw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Prefers-reduce-motion media query">
@@ -1155,10 +1172,10 @@ animateCSS('.my-element', 'bounce').then((message) =&gt; {
     
 
       <section class="docSection-migration" id="migration">
-        <h2>Migration from v3.x and under</h2>
-<p>Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to <code>animate__</code> - so a direct migration is not possible.</p>
+        <h2>Migration from v3.x and Under</h2>
+<p>Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. However, it also comes with a breaking change: we have added a prefix for all of the Animate.css classes - defaulting to <code>animate__</code> - so a direct migration is impossible.</p>
 <p>But fear not! Although the default build, <code>animate.min.css</code>, brings the <code>animate__</code> prefix we also provide the <code>animate.compat.css</code> file which brings no prefix at all, like the previous versions (3.x and under).</p>
-<p>If you're using a bundler, just update your import:</p>
+<p>If you're using a bundler, update your import:</p>
 <p>from:</p>
 <pre><code class="language-js">import 'animate.min.css';
 </code></pre>
@@ -1166,7 +1183,7 @@ animateCSS('.my-element', 'bounce').then((message) =&gt; {
 <pre><code class="language-js">import 'animate.compat.css';
 </code></pre>
 <p>Notice that depending on your project's configuration, this might change a bit.</p>
-<p>In case of using a CDN, just update the link on your HTML:</p>
+<p>In case of using a CDN, update the link in your HTML:</p>
 <p>from:</p>
 <pre><code class="language-html">&lt;head&gt;
   &lt;link
@@ -1191,9 +1208,11 @@ animateCSS('.my-element', 'bounce').then((message) =&gt; {
 
       <section class="docSection-custom-builds" id="custom-builds">
         <h2>Custom Builds</h2>
-<p>Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.</p>
+<p class="warning">Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.</p>
+<p>Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.</p>
 <p>First of all, you’ll need Node and all other dependencies:</p>
-<pre><code class="language-shell">$ cd path/to/animate.css/
+<pre><code class="language-shell">$ git clone https://github.com/animate-css/animate.css.git
+$ cd animate.css
 $ npm install
 </code></pre>
 <p>Next, run <code>npm start</code> to compile your custom build. Three files will be generated:</p>
@@ -1234,14 +1253,14 @@ $ npm install
 
       <section class="docSection-accessibility" id="accessibility">
         <h2>Accessibility</h2>
-<p>Animate.css supports the <a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><code>prefers-reduced-motion</code> media query</a> so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select &quot;reduce motion&quot; on their operating system preferences and it will turn off CSS transitions for them without any further work required.</p>
+<p>Animate.css supports the <a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><code>prefers-reduced-motion</code> media query</a> so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select &quot;reduce motion&quot; on their operating system preferences, and it will turn off CSS transitions for them without any further work required.</p>
 
         <p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/08-accessibility.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
       </section>
     
 
       <section class="docSection-contributors" id="contributors">
-        <h2>Core team</h2>
+        <h2>Core Team</h2>
 <table>
 <thead>
 <tr>
@@ -1254,7 +1273,7 @@ $ npm install
 <tr>
 <td><a href="https://github.com/daneden">Daniel Eden</a></td>
 <td><a href="https://github.com/eltonmesquita">Elton Mesquita</a></td>
-<td><a href="https://github.com/WarenGonzaga">Waren Gonzaga</a></td>
+<td><a href="https://github.com/warengonzaga">Waren Gonzaga</a></td>
 </tr>
 <tr>
 <td>Animate.css Creator</td>
@@ -1270,11 +1289,11 @@ $ npm install
 
       <section class="docSection-license-contributing" id="license-contributing">
         <h2>License and Contributing</h2>
-<p>Animate.css is licensed under the MIT license. (<a href="https://opensource.org/licenses/MIT">https://opensource.org/licenses/MIT</a>)</p>
+<p>Animate.css is licensed under the <a href="http://firstdonoharm.dev">Hippocratic License</a>.</p>
 <h3>Contributing</h3>
-<p>Pull 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 <a href="https://codepen.io">pen</a>. That <strong>last one is important</strong>.</p>
+<p>Pull 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 <a href="https://codepen.io">pen</a>. That <strong>last one is important</strong>.</p>
 <h3>Code of Conduct</h3>
-<p>This project and everyone participating in it are governed by the <a href="https://github.com/animate-css/animate.css/blob/main/CODE_OF_CONDUCT.md">Contributor Covenant Code of Conduct</a>. By participating, you are expected to uphold this code. Please report unacceptable behavior to <a href="mailto:callmeelton@gmail.com">callmeelton@gmail.com</a>.</p>
+<p>This project and everyone participating in it is governed by the <a href="https://github.com/animate-css/animate.css/blob/main/CODE_OF_CONDUCT.md">Contributor Covenant Code of Conduct</a>. By participating, you are expected to uphold this code. Please report unacceptable behavior to <a href="mailto:animate@eltonmesquita.com">animate@eltonmesquita.com</a>.</p>
 
         <p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/09-license-contributing.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
       </section>
@@ -1305,7 +1324,7 @@ $ npm install
 
     <footer class="main-footer">
       <p>
-        Animate.css is a MIT licensed library.
+        Animate.css is a Hippocratic-2.1 licensed library.
         You can use it freely, respecting the terms included in the <a href="https://github.com/animate-css/animate.css/blob/main/LICENSE" title="license">license file.</a>
       </p>
     </footer>

docs/main.mjs

@@ -2,9 +2,11 @@ import buildDocsIndex from './modules/buildDocsIndex.mjs';
 import playground from './modules/playground.mjs';
 import startAnimations from './modules/startAnimations.mjs';
 import toggleOnClick from './modules/toggle.mjs';
+import darkModeControl from './modules/darkMode.mjs';
 
 buildDocsIndex();
 playground();
+darkModeControl();
 
 toggleOnClick('.callout-showList', 'html', 'animationList-active');
 toggleOnClick('.callout-hideList', 'html', 'animationList-active');
@@ -14,12 +16,12 @@ toggleOnClick('.docs-index', 'html', 'hamburger-active');
 requestAnimationFrame(startAnimations);
 
 document.querySelectorAll('.copy-icon').forEach(icon => {
-    icon.addEventListener('click', () => {
-        icon.classList.add('copied');
-        document.querySelector('.copied .tooltip').textContent = "Copied!";
-        setTimeout(() => { 
-            icon.children[0].textContent = "Copy class name to clipboard"
-            icon.classList.remove('copied') 
-        }, 750)
-    })
+  icon.addEventListener('click', () => {
+    icon.classList.add('copied');
+    document.querySelector('.copied .tooltip').textContent = 'Copied!';
+    setTimeout(() => {
+      icon.children[0].textContent = 'Copy class name to clipboard'
+      icon.classList.remove('copied')
+    }, 750)
+  })
 })

docs/modules/darkMode.mjs

@@ -0,0 +1,20 @@
+const darkModeControl = () => {
+  const darkCheck = document.getElementById('night-light-checkbox');
+
+  darkCheck.addEventListener('click', () => {
+    if (darkCheck.checked) {
+      document.body.classList.add('dark');
+      localStorage.setItem('animate-css', 'dark');
+    } else {
+      document.body.classList.remove('dark');
+      localStorage.removeItem('animate-css');
+    }
+  })
+
+  if (localStorage.getItem('animate-css')) {
+    document.body.className = 'dark';
+    darkCheck.checked = true;
+  }
+}
+
+export default darkModeControl;

docs/style.css

@@ -148,6 +148,16 @@ h5 {
   text-decoration: none;
 }
 
+.warning {
+  padding: 1rem;
+
+  color: #000;
+  background: var(--c-background-dark);
+  border-radius: 0.25em;
+
+  font-style: italic;
+}
+
 blockquote {
   border-left: 6px solid var(--c-secondary);
   padding-left: 1rem;
@@ -283,7 +293,7 @@ blockquote {
   justify-content: space-between;
 }
 
-.animation-item--title{
+.animation-item--title {
   width: 100%;
 }
 
@@ -320,23 +330,23 @@ blockquote {
 .copy-icon {
   position: relative;
   height: 10px;
-  border: 1px solid rgba(0, 0, 0, .3);
+  border: 1px solid rgba(0, 0, 0, 0.3);
   align-self: center;
   outline: none;
   cursor: pointer;
   background: none;
-  background: #F7D7B5;
+  background: #f7d7b5;
   visibility: hidden;
 }
 
-.copy-icon::before{
+.copy-icon::before {
   content: '';
   position: absolute;
   right: -4px;
   top: -4px;
   width: 120%;
   height: 120%;
-  border: 1px solid rgba(0, 0, 0, .3);
+  border: 1px solid rgba(0, 0, 0, 0.3);
   z-index: -1;
 }
 
@@ -345,7 +355,7 @@ blockquote {
 }
 
 .animation-item .copy-icon:hover,
-.animation-item .copy-icon:hover::before{
+.animation-item .copy-icon:hover::before {
   border-color: black;
 }
 
@@ -616,3 +626,114 @@ blockquote {
 .animation-list {
   text-align: left;
 }
+
+/*-----------------------------------*\
+  $DARK-MODE
+\*-----------------------------------*/
+
+.night-light-label #night-light-checkbox {
+  position: absolute;
+  visibility: hidden;
+}
+
+.night-light-label {
+  display: block;
+  margin: 20px 0;
+  height: 31px;
+  width: 60px;
+  border: 2px solid #4672fe;
+  border-radius: 30px;
+  position: relative;
+  cursor: pointer;
+}
+
+.night-light-label .night-light-ball {
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  top: 1px;
+  left: 1px;
+  border-radius: 50%;
+  background: #4672fe;
+  z-index: 99;
+  transition: 300ms;
+}
+
+.night-light-label #night-light-checkbox:checked + .night-light-ball {
+  transform: translateX(28px);
+}
+
+.moon-svg,
+.sun-svg {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.moon-svg {
+  right: 5px;
+}
+
+.sun-svg {
+  left: 5px;
+}
+
+.dark #moon-svg,
+.dark #sun-svg {
+  fill: #e0e0e0 !important;
+}
+
+.dark {
+  background-color: #111;
+  color: #e0e0e0;
+}
+
+.dark .intro {
+  background: #111;
+}
+
+.dark .animation-list,
+.dark .sidebar {
+  background: #15151d;
+}
+
+.dark .button.button-animations,
+.dark .callout-hideList.button {
+  color: #e0e0e0;
+  border-color: rgba(255, 255, 255, 0.7);
+  outline: none;
+}
+
+.dark .copy-icon,
+.dark .copy-icon:hover {
+  background: #15151d;
+  border-color: #e0e0e0;
+}
+
+.dark .copy-icon::before,
+.dark .copy-icon:hover::before {
+  border-color: #e0e0e0;
+}
+
+.dark code {
+  color: #111;
+}
+
+.dark h2,
+.dark h3,
+.dark h4,
+.dark a[title='Documentation'],
+.dark pre * {
+  color: #e0e0e0;
+}
+
+.dark section {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark h1,
+.dark a {
+  color: #4672fe;
+}

docsSource/index.js

@@ -23,3 +23,4 @@ fs.writeFile(output, withVersion, 'utf8', (err) => {
   if (err) console.error(err);
   console.log('Template compiled succesfully.');
 });
+

docsSource/sections/01-usage.md

@@ -1,4 +1,4 @@
-## Installation and usage
+## Installation and Usage
 
 ### Installing
 
@@ -8,13 +8,19 @@ Install with npm:
 $ npm install animate.css --save
 ```
 
-with yarn:
+Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. If you are not using any tool for packing or bundling your code, you can simply use the CDN method below):
 
 ```shell
 $ yarn add animate.css
 ```
 
-or add it directly to your webpage using a CDN:
+Import it into your file:
+
+```js
+import 'animate.css';
+```
+
+Or add it directly to your webpage using a CDN:
 
 ```html
 <head>
@@ -39,7 +45,7 @@ That's it! You've got a CSS animated element. Super!
 
 #### Using `@keyframes`
 
-Even though the library provides you a few helper classes like the `animated` class to get you up running quickly, you can use the provided animations `keyframes` directly. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.
+Even though the library provides you a few helper classes like the `animated` class to get you up running quickly, you can directly use the provided animations `keyframes`. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.
 
 Example:
 
@@ -57,7 +63,7 @@ Be aware that some animations are dependent on the `animation-timing` property s
 
 #### CSS Custom Properties (CSS Variables)
 
-Since version 4, Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and iteractions. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value to globally or locally.
+Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value globally or locally.
 
 Example:
 
@@ -74,7 +80,7 @@ Example:
 }
 ```
 
-Custom properties also make it easy to change all your animations time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:
+Custom properties also make it easy to change all your animation's time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:
 
 ```javascript
 // All animations will take twice the time to accomplish
@@ -84,4 +90,4 @@ document.documentElement.style.setProperty('--animate-duration', '2s');
 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.
+Even though some aging browsers do not support custom properties, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.

docsSource/sections/02-utilities.md

@@ -1,4 +1,4 @@
-## Utility classes
+## Utility Classes
 
 Animate.css comes packed with a few utility classes to simplify its use.
 
@@ -62,7 +62,7 @@ The `animate__animated` class has a default speed of `1s`. You can also customiz
 }
 ```
 
-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!
+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!
 
 ### Repeating classes
 
@@ -90,4 +90,4 @@ As with the delay and speed classes, the `animate__repeat` class is based on the
 }
 ```
 
-Notice that `animate__infinite` doesn't use any custom property and changes to `--animate-repeat` will have no effect on it. Don't forget to read the [best practices](#best-practices) section to make the best use of repeating animations.
+Notice that `animate__infinite` doesn't use any custom property, and changes to `--animate-repeat` will have no effect. Don't forget to read the [best practices](#best-practices) section to make the best use of repeating animations.

docsSource/sections/03-best-practices.md

@@ -1,4 +1,4 @@
-## Best practices
+## Best Practices
 
 Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.
 
@@ -32,7 +32,7 @@ Even though Animate.css provides utility classes for repeating animations, inclu
 
 ### Mind the initial and final state of your elements
 
-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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode). Animate.css defaults to `animation-fill-mode: both`, but you can change it to suit your needs.
+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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode). Animate.css defaults to `animation-fill-mode: both`, but you can change it to suit your needs.
 
 ### Don't disable the `prefers-reduced-motion` media query
 

docsSource/sections/06-migration.md

@@ -1,10 +1,10 @@
-## Migration from v3.x and under
+## Migration from v3.x and Under
 
-Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to `animate__` - so a direct migration is not possible.
+Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. However, it also comes with a breaking change: we have added a prefix for all of the Animate.css classes - defaulting to `animate__` - so a direct migration is impossible.
 
 But fear not! Although the default build, `animate.min.css`, brings the `animate__` prefix we also provide the `animate.compat.css` file which brings no prefix at all, like the previous versions (3.x and under).
 
-If you're using a bundler, just update your import:
+If you're using a bundler, update your import:
 
 from:
 
@@ -20,7 +20,7 @@ import 'animate.compat.css';
 
 Notice that depending on your project's configuration, this might change a bit.
 
-In case of using a CDN, just update the link on your HTML:
+In case of using a CDN, update the link in your HTML:
 
 from:
 

docsSource/sections/07-custom-builds.md

@@ -1,11 +1,14 @@
 ## Custom Builds
 
-Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.
+<p class="warning">Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.</p>
+
+Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.
 
 First of all, you’ll need Node and all other dependencies:
 
 ```shell
-$ cd path/to/animate.css/
+$ git clone https://github.com/animate-css/animate.css.git
+$ cd animate.css
 $ npm install
 ```
 
@@ -15,7 +18,7 @@ Next, run `npm start` to compile your custom build. Three files will be generate
 - `animate.min.css`: minified build ready for production
 - `animate.compat.css`: minified build ready for production **without class prefix**. This should only be used as an easy path for migrations.
 
-For example, if you'll only use some of the “attention seekers” animations, simply edit the `./source/animate.css` file, delete every `@import` and the ones you want to use.
+For example, if you'll only use some of the “attention seekers” animations, simply edit the `./source/animate.css` file, delete every `@import`, and add the ones you want to use.
 
 ```css
 @import 'attention_seekers/bounce.css';

docsSource/sections/08-accessibility.md

@@ -1,3 +1,3 @@
 ## Accessibility
 
-Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
+Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences, and it will turn off CSS transitions for them without any further work required.

docsSource/sections/09-contributors.md

@@ -1,6 +1,6 @@
-## Core team
+## Core Team
 
 | ![](https://avatars2.githubusercontent.com/u/439365?s=460&u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&v=4) | ![](https://avatars2.githubusercontent.com/u/5007208?s=460&u=418401ee605824272e5dcb955fd64ea24546a857&v=4) | ![](https://avatars1.githubusercontent.com/u/15052701?s=460&u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&v=4) |
 | --- | --- | --- |
-| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) |
+| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/warengonzaga) |
 | Animate.css Creator | Maintainer | Core Contributor |

docsSource/sections/09-license-contributing.md

@@ -1,11 +1,11 @@
 ## License and Contributing
 
-Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)
+Animate.css is licensed under the [Hippocratic License](http://firstdonoharm.dev).
 
 ### Contributing
 
-Pull 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](https://codepen.io). That **last one is important**.
+Pull 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](https://codepen.io). That **last one is important**.
 
 ### Code of Conduct
 
-This project and everyone participating in it are governed by the [Contributor Covenant Code of Conduct](https://github.com/animate-css/animate.css/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
+This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](https://github.com/animate-css/animate.css/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [animate@eltonmesquita.com](mailto:animate@eltonmesquita.com).

docsSource/template.html

@@ -48,7 +48,7 @@
   <body>
 
     <!-- Fork Corner -->
-    <a href="https://github.com/animate-css/animate.css" target="_blank" id="fork-corner" class="fork-corner fc-size-small fc-pos-tl fc-animate-default fc-theme-github"></a>
+    <a href="https://github.com/animate-css/animate.css" target="_blank" id="fork-corner" class="fork-corner fc-size-small fc-pos-tl fc-animate-grow fc-theme-github"></a>
 
     <article class="intro">
       <section class="callout">
@@ -60,6 +60,20 @@
       </section>
 
       <section class="animation-list">
+        <label for="night-light-checkbox" class="night-light-label">
+          <input type="checkbox" id="night-light-checkbox" />
+          <span class="night-light-ball"></span>
+          <svg viewBox="0 0 512 512" class="sun-svg">
+            <path id="sun-svg"
+              d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z">
+            </path>
+          </svg>
+          <svg viewBox="0 0 512 512" class="moon-svg">
+            <path id="moon-svg"
+              d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z">
+            </path>
+          </svg>
+        </label>
         <button class="callout-hideList button">Close list</button>
         {{list}}
       </section>
@@ -125,7 +139,7 @@
 
     <footer class="main-footer">
       <p>
-        Animate.css is a MIT licensed library.
+        Animate.css is a Hippocratic-2.1 licensed library.
         You can use it freely, respecting the terms included in the <a href="https://github.com/animate-css/animate.css/blob/main/LICENSE" title="license">license file.</a>
       </p>
     </footer>

package.json

@@ -1,6 +1,7 @@
 {
   "name": "animate.css",
   "version": "4.1.1",
+  "description": "A cross-browser library of CSS animations",
   "main": "animate.css",
   "repository": {
     "type": "git",
@@ -10,7 +11,7 @@
     "name": "Animate.css"
   },
   "homepage": "https://animate.style/",
-  "license": "MIT",
+  "license": "Hippocratic-2.1",
   "animateConfig": {
     "prefix": "animate__"
   },
@@ -21,12 +22,12 @@
     "raw": "npx postcss source/animate.css -o animate.css --no-map --env development",
     "prod": "npx postcss source/animate.css -o animate.min.css --no-map --env production",
     "format": "prettier --write \"**/*.{js,json,md,css}\"",
-    "precommit": "lint-staged",
     "docs:library": "npx postcss source/animate.css -o ./docs/animate.min.css --no-map --env production",
     "docs:pages": "node ./docsSource/index.js",
     "docs": "npm-run-all docs:library docs:pages",
     "version": "npm-run-all start docs && git add -A docs animate.css animate.min.css animate.compat.css",
-    "postversion": "git push && git push --tags"
+    "postversion": "git push && git push --tags",
+    "prepare": "husky install"
   },
   "browserslist": [
     "> 3%",
@@ -41,30 +42,23 @@
     }
   },
   "devDependencies": {
-    "autoprefixer": "^10.2.4",
-    "cssnano": "^4.1.10",
-    "eslint": "^7.19.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "markdown-it": "^12.0.4",
+    "autoprefixer": "^10.4.7",
+    "cssnano": "^5.0.17",
+    "eslint": "^7.32.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^11.2.6",
+    "markdown-it": "^12.3.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.6",
+    "postcss": "^8.4.14",
     "postcss-cli": "^8.3.1",
     "postcss-header": "^3.0.1",
-    "postcss-import": "^12.0.1",
-    "postcss-prefixer": "^2.1.2",
+    "postcss-import": "^14.0.2",
+    "postcss-prefixer": "^2.1.3",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.2.1"
+    "prettier": "^2.7.1"
   },
   "lint-staged": {
-    "*.{js,json,md,css}": [
-      "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm-run-all start precommit"
-    }
+    "*.{mjs,js,json,md,css}": "prettier --write"
   },
   "files": [
     "animate.compat.css",

postcss.config.js

@@ -1,18 +1,18 @@
 const fs = require('fs');
 const {homepage, version, author, animateConfig} = JSON.parse(fs.readFileSync('package.json'));
 
-const header = `@charset "UTF-8";
+const header = `
+@charset "UTF-8";
 
 /*!
  * animate.css - ${homepage}
  * Version - ${version}
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
  *
  * Copyright (c) ${new Date().getFullYear()} ${author.name}
  */
 
-
-  `;
+`;
 
 module.exports = (ctx) => {
   const prefix = ctx.env === 'compat' ? '' : animateConfig.prefix;