Compare commits
1 commit
Author | SHA1 | Date | |
---|---|---|---|
|
e6de97a96b |
File diff suppressed because one or more lines are too long
15
animate.css
vendored
15
animate.css
vendored
|
@ -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);
|
||||
|
|
2
animate.min.css
vendored
2
animate.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/animate.min.css
vendored
2
docs/animate.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -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"><div class="animate__animated animate__bounce animate__delay-2s">Example</div>
|
||||
<pre><code class="language-html"><div class="animate__animated animate__bounce animate__delay-2x">Example</div>
|
||||
</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 {
|
||||
|
|
|
@ -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:
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue