✨ TWEAK: improve delay expression (#1508)

* ✨ TWEAK: improve delay expression

* ✨ TWEAK: add support for old versions

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-2x` | `2s`               |
-| `animate__delay-3s` | `3s`               |
+| `animate__delay-3x` | `3s`               |
-| `animate__delay-4s` | `4s`               |
+| `animate__delay-4x` | `4s`               |
-| `animate__delay-5s` | `5s`               |
+| `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:
 

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);
 }