Compare commits
1 commit
Author | SHA1 | Date | |
---|---|---|---|
e6de97a96b |
|
@ -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/).
|
||||
|
||||
|
|
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:
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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