diff --git a/docs/img/copy-clipboard.svg b/docs/img/copy-clipboard.svg new file mode 100644 index 000000000..0aafcc778 --- /dev/null +++ b/docs/img/copy-clipboard.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index f44fa664d..95146d400 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,6 +25,7 @@ +

Installation and Usage

Installing

Install with npm:

-
$ npm install animate.css --save
+  

+    
$ npm install animate.css --save
 

+  
+

 
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):

-
$ yarn add animate.css
+

+  
$ yarn add animate.css
 

+  
+

 
Import it into your file:

-
import 'animate.css';
+

+  
import 'animate.css';
 

+  
+

 
Or add it directly to your webpage using a CDN:

-
<head>
+
+

+  
<head>
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
   />
 </head>
 

+  
+

+
 
Basic usage

 
After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):

-
<h1 class="animate__animated animate__bounce">An animated element</h1>
+

+  
<h1 class="animate__animated animate__bounce">An animated element</h1>
 

+  
+

+
 
That's it! You've got a CSS animated element. Super!

 

 
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 best practices and gotchas sections to bring your web-things to life in the best way possible.

@@ -912,7 +946,8 @@ 
Basic usage

 
Using @keyframes

 
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:

-
.my-element {
+

+  
.my-element {
   display: inline-block;
   margin: 0 0.5rem;
 
@@ -920,11 +955,17 @@ 
Using @keyframes

   animation-duration: 2s; /* don't forget to set a duration! */
 }
 

+  
+

 
Be aware that some animations are dependent on the animation-timing property set on the animation's class. Changing or not declaring it might lead to unexpected results.

 
CSS Custom Properties (CSS Variables)

 
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:

-
/* This only changes this particular animation duration */
+

+  
/* This only changes this particular animation duration */
 .animate__animated.animate__bounce {
   --animate-duration: 2s;
 }
@@ -935,13 +976,24 @@ 
CSS Custom Properties (CSS Variables)

   --animate-delay: 0.9s;
 }
 

+  
+

 
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:

-
// All animations will take twice the time to accomplish
+

+  
// 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');
 

+  
+

 
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.

 
         
Edit this on GitHub

@@ -953,8 +1005,14 @@ 
Utility Classes

 
Animate.css comes packed with a few utility classes to simplify its use.

 
Delay classes

 
You can add delays directly on the element's class attribute, just like this:

-
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
+

+  
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
 

+  
+

 
Animate.css provides the following delays:

 
@@ -983,6 +1041,7 @@ 
Delay classes

 
 
 

 
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:

+

 
/* All delay classes will take 2x longer to start */
 :root {
   --animate-delay: 2s;
@@ -993,10 +1052,21 @@ 
Delay classes

   --animate-delay: 0.5s;
 }
 

+
+

 
Slow, slower, fast, and Faster classes

 
You can control the speed of the animation by adding these classes, as below:

-
<div class="animate__animated animate__bounce animate__faster">Example</div>
+

+  
<div class="animate__animated animate__bounce animate__faster">Example</div>
 

+  
+

 
@@ -1024,7 +1094,8 @@ 
Slow, slower, fast, and Faster classes

 
 

 
 

 
The animate__animated class has a default speed of 1s. You can also customize the animations duration through the --animate-duration property, globally or locally. This will affect both the animations and the utility classes. Example:

-
/* All animations will take twice as long to finish */
+

+  
/* All animations will take twice as long to finish */
 :root {
   --animate-duration: 2s;
 }
@@ -1034,11 +1105,22 @@ 
Slow, slower, fast, and Faster classes

   --animate-duration: 0.5s;
 }
 

+  
+

 
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

 
You can control the iteration count of the animation by adding these classes, like below:

-
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
+

+  
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
 

+  
+

 
@@ -1066,13 +1148,19 @@ 
Repeating classes

 
 

 
 

 
As with the delay and speed classes, the animate__repeat class is based on the --animate-repeat property and has a default iteration count of 1. You can customize them by setting the --animate-repeat property to a longer or a shorter value:

-
/* The element will repeat the animation 2x
+

+  
/* The element will repeat the animation 2x
    It's better to set this property locally and not globally or
    you might end up with a messy situation */
 .my-element {
   --animate-repeat: 2;
 }
 

+  
+

 
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 section to make the best use of repeating animations.

 
         
Edit this on GitHub

@@ -1123,23 +1211,42 @@ 
Intervals between repeats

       

         
Usage with Javascript

 
You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

-
const element = document.querySelector('.my-element');
+

+  
const element = document.querySelector('.my-element');
 element.classList.add('animate__animated', 'animate__bounceOutLeft');
 

+  
+

 
You can detect when an animation ends:

-
const element = document.querySelector('.my-element');
+

+  
const element = document.querySelector('.my-element');
 element.classList.add('animate__animated', 'animate__bounceOutLeft');
 
 element.addEventListener('animationend', () => {
   // do something
 });
 

+  
+

 
or change its duration:

-
const element = document.querySelector('.my-element');
+

+  
const element = document.querySelector('.my-element');
 element.style.setProperty('--animate-duration', '0.5s');
 

+  
+

 
You can also use a simple function to add the animations classes and remove them automatically:

-
const animateCSS = (element, animation, prefix = 'animate__') =>
+

+  
const animateCSS = (element, animation, prefix = 'animate__') =>
   // We create a Promise and return it
   new Promise((resolve, reject) => {
     const animationName = `${prefix}${animation}`;
@@ -1157,14 +1264,25 @@ 
Usage with Javascript

     node.addEventListener('animationend', handleAnimationEnd, {once: true});
   });
 

+  
+

 
And use it like this:

-
animateCSS('.my-element', 'bounce');
+

+  
animateCSS('.my-element', 'bounce');
 
 // or
 animateCSS('.my-element', 'bounce').then((message) => {
   // Do something after the animation
 });
 

+  
+

 
If you had a hard time understanding the previous function, have a look at const, classList, arrow functions, and Promises.

 
         
Edit this on GitHub

@@ -1180,8 +1298,14 @@ 
Migration from v3.x and Under

 
import 'animate.min.css';
 

 
to

-
import 'animate.compat.css';
+

+  
import 'animate.compat.css';
 

+  
+

 
Notice that depending on your project's configuration, this might change a bit.

 
In case of using a CDN, update the link in your HTML:

 
from:

@@ -1193,13 +1317,19 @@ 
Migration from v3.x and Under

 </head>
 

 
to

-
<head>
+

+  
<head>
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
   />
 </head>
 

+  
+

 
In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the animate.compat.css file.

 
         
Edit this on GitHub

@@ -1210,7 +1340,7 @@ 
Migration from v3.x and Under

         
Custom Builds

 
Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.

 
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:

+
First of all, you'll need Node and all other dependencies:

 
$ git clone https://github.com/animate-css/animate.css.git
 $ cd animate.css
 $ npm install
@@ -1221,7 +1351,7 @@ 
Custom Builds

 
  • 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 the ones you want to use.
    
 
    @import 'attention_seekers/bounce.css';
 @import 'attention_seekers/flash.css';
 @import 'attention_seekers/pulse.css';
@@ -1237,14 +1367,27 @@ 
    Custom Builds
    
 
    Now, just run npm start and your highly optimized build will be generated at the root of the project.
    
 
    Changing the default prefix
    
 
    It's pretty straight forward to change animate's prefix on your custom build. Change the animateConfig's prefix property in the package.json file and rebuild the library with npm start:
    
-
    /* on Animate.css package.json */
+
+
    
+  
    /* on Animate.css package.json */
 "animateConfig": {
   "prefix": "myCustomPrefix__"
 },
 
    
+  
+
    
 
    then:
    
-
    $ npm start
+
    
+  
    $ npm start
 
    
+  
+
    
 
    Easy peasy!
    
 
         
    Edit this on GitHub
    
diff --git a/docs/main.mjs b/docs/main.mjs
index be70fa928..28ae91616 100644
--- a/docs/main.mjs
+++ b/docs/main.mjs
@@ -15,13 +15,48 @@ toggleOnClick('.docs-index', 'html', 'hamburger-active');
 
 requestAnimationFrame(startAnimations);
 
-document.querySelectorAll('.copy-icon').forEach(icon => {
+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.children[0].textContent = 'Copy class name to clipboard';
+      icon.classList.remove('copied');
+    }, 750);
+  });
+});
+
+function setupCodeCopyButtons() {
+  document.querySelectorAll('.copy-code-btn').forEach((btn) => {
+    const wrapper = btn.closest('.code-block-wrapper');
+    const code = wrapper.querySelector('pre code');
+    const tooltip = btn.querySelector('.copy-tooltip');
+    btn.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(code.innerText);
+        tooltip.textContent = 'Copied!';
+        tooltip.style.opacity = 1;
+        setTimeout(() => {
+          tooltip.textContent = 'Copy';
+          tooltip.style.opacity = 0;
+        }, 1200);
+      } catch (e) {
+        tooltip.textContent = 'Error';
+        tooltip.style.opacity = 1;
+        setTimeout(() => {
+          tooltip.textContent = 'Copy';
+          tooltip.style.opacity = 0;
+        }, 1200);
+      }
+    });
+
+    btn.addEventListener('mouseenter', () => {
+      tooltip.style.opacity = 1;
+    });
+    btn.addEventListener('mouseleave', () => {
+      if (tooltip.textContent === 'Copy') tooltip.style.opacity = 0;
+    });
+  });
+}
+
+setupCodeCopyButtons();
diff --git a/docs/style.css b/docs/style.css
index 94123ceb9..0206f5c50 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -350,6 +350,62 @@ blockquote {
   z-index: -1;
 }
 
+.code-block-wrapper {
+  position: relative;
+}
+
+.copy-code-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  color: #fff;
+  opacity: 0.7;
+}
+
+.copy-code-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  opacity: 1;
+}
+
+.copy-code-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.copy-tooltip {
+  position: absolute;
+  top: -28px;
+  right: 0;
+  background: #333;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.8em;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  white-space: nowrap;
+  z-index: 10;
+}
+
+.copy-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  right: 8px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 4px 4px 0 4px;
+  border-color: #333 transparent transparent transparent;
+}
+
 .animation-item:hover .copy-icon {
   visibility: visible;
 }
@@ -737,3 +793,20 @@ blockquote {
 .dark a {
   color: #4672fe;
 }
+
+.dark .copy-code-btn {
+  color: #e0e0e0;
+}
+
+.dark .copy-code-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark .copy-tooltip {
+  background: #e0e0e0;
+  color: #333;
+}
+
+.dark .copy-tooltip::after {
+  border-color: #e0e0e0 transparent transparent transparent;
+}