✨ TWEAK: improve delay expression (#1508)

* ✨ TWEAK: improve delay expression

* ✨ TWEAK: add support for old versions

README.md

@@ -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/).
 

animate.css

@@ -42,31 +42,36 @@
   -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
   animation-iteration-count: calc(var(--animate-repeat) * 3);
 }
-.animate__animated.animate__delay-1s {
+.animate__animated.animate__delay-1s,
+.animate__animated.animate__delay-1x {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
   -webkit-animation-delay: var(--animate-delay);
   animation-delay: var(--animate-delay);
 }
-.animate__animated.animate__delay-2s {
+.animate__animated.animate__delay-2s,
+.animate__animated.animate__delay-2x {
   -webkit-animation-delay: calc(1s * 2);
   animation-delay: calc(1s * 2);
   -webkit-animation-delay: calc(var(--animate-delay) * 2);
   animation-delay: calc(var(--animate-delay) * 2);
 }
-.animate__animated.animate__delay-3s {
+.animate__animated.animate__delay-3s,
+.animate__animated.animate__delay-3x {
   -webkit-animation-delay: calc(1s * 3);
   animation-delay: calc(1s * 3);
   -webkit-animation-delay: calc(var(--animate-delay) * 3);
   animation-delay: calc(var(--animate-delay) * 3);
 }
-.animate__animated.animate__delay-4s {
+.animate__animated.animate__delay-4s,
+.animate__animated.animate__delay-4x {
   -webkit-animation-delay: calc(1s * 4);
   animation-delay: calc(1s * 4);
   -webkit-animation-delay: calc(var(--animate-delay) * 4);
   animation-delay: calc(var(--animate-delay) * 4);
 }
-.animate__animated.animate__delay-5s {
+.animate__animated.animate__delay-5s,
+.animate__animated.animate__delay-5x {
   -webkit-animation-delay: calc(1s * 5);
   animation-delay: calc(1s * 5);
   -webkit-animation-delay: calc(var(--animate-delay) * 5);

docs/index.html

@@ -953,7 +953,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
 <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>
-<pre><code class="language-html">&lt;div class=&quot;animate__animated animate__bounce animate__delay-2s&quot;&gt;Example&lt;/div&gt;
+<pre><code class="language-html">&lt;div class=&quot;animate__animated animate__bounce animate__delay-2x&quot;&gt;Example&lt;/div&gt;
 </code></pre>
 <p>Animate.css provides the following delays:</p>
 <table>
@@ -965,23 +965,26 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
 </thead>
 <tbody>
 <tr>
-<td><code>animate__delay-2s</code></td>
+<td><code>animate__delay-2x</code></td>
 <td><code>2s</code></td>
 </tr>
 <tr>
-<td><code>animate__delay-3s</code></td>
+<td><code>animate__delay-3x</code></td>
 <td><code>3s</code></td>
 </tr>
 <tr>
-<td><code>animate__delay-4s</code></td>
+<td><code>animate__delay-4x</code></td>
 <td><code>4s</code></td>
 </tr>
 <tr>
-<td><code>animate__delay-5s</code></td>
+<td><code>animate__delay-5x</code></td>
 <td><code>5s</code></td>
 </tr>
 </tbody>
 </table>
+<blockquote>
+<p>In the previous versions, the library supported a slightly different version of the classes, like <code>animate__delay-2s</code>. As this utility works as a multiplier, it made it very confusing to use if the root variable <code>--animate-delay</code> was set to anything but <code>1</code>. We changed it but we still support the old classes and there's no need to migrate your code to the newer version.</p>
+</blockquote>
 <p>The provided delays are from 1 to 5 seconds. You can customize them setting the <code>--animate-delay</code> property to a longer or a shorter duration:</p>
 <pre><code class="language-css">/* All delay classes will take 2x longer to start */
 :root {

docsSource/sections/02-utilities.md

@@ -7,17 +7,19 @@ Animate.css comes packed with a few utility classes to simplify its use.
 You can add delays directly on the element's class attribute, just like this:
 
 ```html
-<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
+<div class="animate__animated animate__bounce animate__delay-2x">Example</div>
 ```
 
 Animate.css provides the following delays:
 
 | Class name          | Default delay time |
 | ------------------- | ------------------ |
-| `animate__delay-2s` | `2s`               |
-| `animate__delay-3s` | `3s`               |
-| `animate__delay-4s` | `4s`               |
-| `animate__delay-5s` | `5s`               |
+| `animate__delay-2x` | `2s`               |
+| `animate__delay-3x` | `3s`               |
+| `animate__delay-4x` | `4s`               |
+| `animate__delay-5x` | `5s`               |
+
+> In the previous versions, the library supported a slightly different version of the classes, like `animate__delay-2s`. As this utility works as a multiplier, it made it very confusing to use if the root variable `--animate-delay` was set to anything but `1`. We changed it but we still support the old classes and there's no need to migrate your code to the newer version.
 
 The provided delays are from 1 to 5 seconds. You can customize them setting the `--animate-delay` property to a longer or a shorter duration:
 

docsSource/sections/07-custom-builds.md

@@ -18,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 add 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 the ones you want to use.
 
 ```css
 @import 'attention_seekers/bounce.css';

package.json

@@ -42,20 +42,20 @@
     }
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.2",
     "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.4.14",
+    "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
     "postcss-header": "^3.0.1",
     "postcss-import": "^14.0.2",
     "postcss-prefixer": "^2.1.3",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.7.1"
+    "prettier": "^2.5.1"
   },
   "lint-staged": {
     "*.{mjs,js,json,md,css}": "prettier --write"

source/_base.css

@@ -19,23 +19,28 @@
   animation-iteration-count: calc(var(--animate-repeat) * 3);
 }
 
-.animated.delay-1s {
+.animated.delay-1s,
+.animated.delay-1x {
   animation-delay: var(--animate-delay);
 }
 
-.animated.delay-2s {
+.animated.delay-2s,
+.animated.delay-2x {
   animation-delay: calc(var(--animate-delay) * 2);
 }
 
-.animated.delay-3s {
+.animated.delay-3s,
+.animated.delay-3x {
   animation-delay: calc(var(--animate-delay) * 3);
 }
 
-.animated.delay-4s {
+.animated.delay-4s,
+.animated.delay-4x {
   animation-delay: calc(var(--animate-delay) * 4);
 }
 
-.animated.delay-5s {
+.animated.delay-5s,
+.animated.delay-5x {
   animation-delay: calc(var(--animate-delay) * 5);
 }