reveal.js-appearance 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.3.0] - 2023-10-25
+### Added
+- Added word and character appearances
+
+### Changed
+- The plugin is totally refactored and uses a promise.
+- Fix for fragments as Appearance items
+- Another fix for hidden items in speaker view
+
+
 ## [1.2.1] - 2023-07-22
 ### Added
 - Fix for hidden items in print and speaker view

package/README.md

@@ -4,18 +4,16 @@
 
 An animation plugin for [Reveal.js](https://revealjs.com) that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.
 
-[<img src="https://martinomagnifico.github.io/reveal.js-appearance/screenshot.png" width="100%">](https://martinomagnifico.github.io/reveal.js-appearance/demo.html)
+[<img src="https://martinomagnifico.github.io/reveal.js-appearance/screenshot.png" width="100%">](https://martinomagnifico.github.io/reveal.js-appearance/demo/demo.html)
 
 In Powerpoint you can make slides with items that appear automatically with effects. This plugin for Reveal.js tries to achieve the same result. It's easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes to allow for a non-animated state. 
 
-* [Demo](https://martinomagnifico.github.io/reveal.js-appearance/demo.html)
-* [Markdown demo](https://martinomagnifico.github.io/reveal.js-appearance/demo-markdown.html)
+* [Demo](https://martinomagnifico.github.io/reveal.js-appearance/demo/demo.html)
+* [Markdown demo](https://martinomagnifico.github.io/reveal.js-appearance/demo/demo-markdown.html)
 
 The animations will start automatically after or at each slide or fragment change if the HTML is set up to use Appearance.
 
-Version 1.1.1 adds an `autoappear` mode for use in cases where adding animation classes is too much of a hassle, like inside Markdown.
-
-Appearance v1.1.2 brought some **breaking changes**, please refer to the [migration guide](#migration-guide) before updating from v1.1.1 and under. It also changed the internal delay mechanism to use CSS animation delay in combination to adding the trigger on the parent, not each animated element. This will improve the performance.
+Version 1.3.0 adds an option to animate the words in a sentence, or the letters in a word.
 
 
 ## Basics
@@ -79,7 +77,7 @@ If you're using ES modules, you can add it like this:
 ```
 
 ### Styling
-Since version 1.1.2, the styling of Appearance is automatically inserted, either loaded through NPM or from the plugin folder. Two files are inserted: The first one is Animate.css by Daniel Eden for the basic animations, we add it through a CDN. The second file adds to the first stylesheet to allow for a non-animated state.
+The styling of Appearance is automatically inserted, either loaded through NPM or from the plugin folder. Two files are inserted: The first one is Animate.css by Daniel Eden for the basic animations, we add it through a CDN. The second file adds to the first stylesheet to allow for a non-animated state.
 
 If you want to change the Appearance style, you can simply make your own style and use that stylesheet instead. Linking to your custom styles can be managed through the `csspath` option of Appearance.
 
@@ -99,6 +97,15 @@ It is easy to set up your HTML structure for Appearance. Each element that you w
 
 When you are working with Markdown (or in any other case), this can be a chore **so if you do not want to add all these classes**, you can set the option `autoappear` to `true` (see [Autoappear](#autoappear) below) and let Appearance do the heavy work.
 
+#### Animating words and letters
+
+To nicely animate the words in a heading, or the letters of a word, add an animation class to it, and add a data-attribute for the kind of split you want:  
+
+```html
+<h3 class="animate__fadeInDown" data-split="words">Let words apear and appear</h3>
+<h3 class="animate__fadeInDown" data-split="letters">Let letters apear and appear</h3>
+```
+
 
 ## Now change it
 
@@ -125,6 +132,21 @@ You can change the speed of each animation, using the tempo classes from Animate
 <img class="animate__fadeInDown animate__faster" data-src="4.jpg">
 ```
 
+
+### Changing word and letter animations
+
+For words and letters, the same techniques can be used. 
+
+Note that the data-delay also gets copied to the smaller elements in it, which means that there is no more 'whole sentence' or 'whole word' to delay. By default, the whole element then gets the delay (depending on if it is following other animations) as defined in the `delay` option in the Configuration, but it can be overriden by an optional `data-container-delay`. 
+
+```html
+<h3 class="animate__fadeInDown animate__faster" 
+	data-split="words" 
+	data-delay="80"
+	data-container-delay="600">Let words apear and appear</h3>
+```
+
+
 ### Changing the 'appearevent'
 When you navigate from slide to slide, you can set transition effects in Reveal. These effects take some time. That's why, by default, Appearance only starts when the slide transition has ended. 
 
@@ -174,9 +196,17 @@ Reveal.initialize({
 });
 ```
 
-You can add any selector and animation class to this object.
+You can add any selector and animation class to this object. You can use a simple JSON object, or more elaborate like this (you can also mix them): `{"ul li": {"animation":"animate__fadeInLeft", "speed":"slow", "delay":"100"}}`. An object like that can contain the following keys:
+
+* animation
+* speed
+* delay
+* split
+* container-delay 
 
-Now you do not need to add any classes to the markup and it will stay like this:
+where the last two keys are specific for word- and letter-animations.
+
+If you choose to write all your animation selectors and properties globally, you no longer need to add any classes to the markup and it can stay like this:
 
 ```html
 <ul>
@@ -227,10 +257,13 @@ Reveal.initialize({
 
 ### Local auto-appear, specified
 
-You can also add a JSON object to the slide’s `data-autoappear`, with specific elements, their animations class as a string or an array with animations class, optional speed class and delay. 
+You can also add a JSON object to the slide’s `data-autoappear`, with specific elements, their animations class(es) as a string or an object with animations class(es), optional speed and optional delay.  
+
+In the example below you can see that mixing strings and objects is perfectly fine. The `ul li` has a simple string for only the animation class(es) while the `h3` uses an object with keys.
 
 ```html
-<section data-autoappear='{"ul li":"animate__fadeInRight","h3":["animate__fadeInDown, animate__slow","100ms"]}'>
+<section data-autoappear='{"ul li":"animate__fadeInRight", 
+"h3": {"animation":"animate__fadeInDown", "speed":"slow", "delay":"100"}}'>
 	<h3>Local auto-appear, specified</h3>
 	<ul>
 		<li>This is list item 1</li>
@@ -278,7 +311,7 @@ Reveal.initialize({
 
 
 ## Migration guide
-Appearance v1.1.2 is an update to stay current with the latest version of Animate.css, which itself brought breaking changes in version 4. Animate.css v4 added a prefix for all of the Animate.css classes, defaulting to `animate__` . Appearance will now automatically add the Animate.css base class (`animate__animated`) to any element with a Animate.css animation class.
+Appearance v1.1.2 was an update to stay current with the latest version of Animate.css, which itself brought breaking changes in version 4. Animate.css v4 added a prefix for all of the Animate.css classes, defaulting to `animate__` . Appearance will now automatically add the Animate.css base class (`animate__animated`) to any element with a Animate.css animation class.
 
 You have two options to migrate to the new version:
 

package/package.json

@@ -1,21 +1,65 @@
 {
-    "name": "reveal.js-appearance",
-    "version": "1.2.1",
-    "main": "plugin/appearance/appearance.js",
-    "module": "plugin/appearance/appearance.esm.js",
-    "description": "An animation plugin for Reveal.js that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.",
-    "keywords": "reveal, reveal.js, reveal-plugin, plugin, text effects, powerpoint",
-    "homepage": "https://github.com/Martinomagnifico/reveal.js-appearance",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/Martinomagnifico/reveal.js-appearance.git"
-    },
-    "author": "Martijn De Jongh",
-    "license": "MIT, Copyright (C) 2023 Martijn De Jongh",
-    "peerDependencies": {
-        "reveal.js": "^4.2"
-    },
-    "dependencies": {
-        "animate.css": "^4.1.1"
-    }
-}
+  "name": "reveal.js-appearance",
+  "version": "1.3.0",
+  "description": "An animation plugin for Reveal.js that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.",
+  "keywords": [
+    "reveal",
+    "reveal.js",
+    "reveal-plugin",
+    "plugin",
+    "text effects",
+    "powerpoint"
+  ],
+  "main": "plugin/appearance/appearance.js",
+  "module": "plugin/appearance/appearance.esm.js",
+  "browser": "plugin/appearance/appearance.js",
+  "author": {
+    "name": "Martijn De Jongh (Martino)",
+    "email": "martijn.de.jongh@gmail.com",
+    "web": "https://martinomagnifico.github.io",
+    "url": "https://martinomagnifico.github.io",
+    "username": "martinomagnifico"
+  },
+  "homepage": "https://github.com/Martinomagnifico/reveal.js-appearance",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/martinomagnifico/reveal.js-appearance.git"
+  },
+  "functionname": "Appearance",
+  "license": "MIT",
+  "scripts": {
+    "start": "gulp demo",
+    "build": "NODE_ENV=prod gulp build"
+  },
+  "overrides": {
+    "chokidar": "3.5.3",
+    "glob-parent": "6.0.2"
+  },
+  "browserslist": "> 2%, not dead",
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.5",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.2",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "browser-sync": "^2.29.3",
+    "core-js": "^3.31.0",
+    "del": "^5.1.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-header": "^2.0.9",
+    "gulp-plumber": "^1.2.1",
+    "gulp-pug": "^5.0.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.1.0",
+    "merge-stream": "^2.0.0",
+    "rollup": "^2.79.1",
+    "sass": "^1.63.6"
+  },
+  "dependencies": {
+    "animate.css": "^4.1.1",
+    "reveal.js": "^4.6.0"
+  },
+  "copydependencies": [
+    "reveal.js"
+  ]
+}

package/plugin/appearance/appearance.css

@@ -1,307 +1,203 @@
-/*
- ****************************************************************
- * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
- * https://github.com/Martinomagnifico
+
+/*****************************************************************
  *
- * Appearance.js for Reveal.js
- * Version 1.2.0
+ * Appearance for Reveal.js 
+ * Version 1.3.0
  * 
+ * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
+ * https://github.com/martinomagnifico
+ *
  * @license 
  * MIT licensed
+ * 
+ * Copyright (C) 2023 Martijn De Jongh (Martino)
  *
- * Thanks to:
- *  - Hakim El Hattab, Reveal.js
- *  - Daniel Eden, Animate.css
- *****************************************************************
-*/
-/* Animate.css overrides */
-section:not(.stack):not([data-appearance-can-start]) .animate__animated, section:not(.stack):not([data-appearance-can-start]) .animated {
-  opacity: 0;
-  -webkit-animation: none;
-          animation: none;
-}
-.reveal.overview section:not(.stack):not([data-appearance-can-start]) .animated, .reveal.overview section:not(.stack):not([data-appearance-can-start]) .animate__animated {
-  visibility: visible;
-  -webkit-animation: none;
-          animation: none;
-  opacity: 1;
-}
-
-.fragment:not(.visible) .animate__animated, .fragment:not(.visible) .animated, .fragment:not(.visible).animate__animated, .fragment:not(.visible).animated {
-  opacity: 0;
-  -webkit-animation: none;
-          animation: none;
-}
-
-i.animate__animated, i.animated,
-span.animate__animated, span.animated {
-  display: inline-block;
-}
+ ******************************************************************/
 
 /* Custom Appearance animation keyframes */
-@-webkit-keyframes skidLeft {
-  from {
-    -webkit-transform: translate3d(-20%, 0, 0) skewX(0deg);
-            transform: translate3d(-20%, 0, 0) skewX(0deg);
-    opacity: 0;
-  }
-  50% {
-    -webkit-transform: translate3d(2%, 0, 0) skewX(-10deg);
-            transform: translate3d(2%, 0, 0) skewX(-10deg);
-    opacity: 1;
-  }
-  75% {
-    -webkit-transform: translate3d(-1%, 0, 0) skewX(10deg);
-            transform: translate3d(-1%, 0, 0) skewX(10deg);
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0) skewX(0deg);
-            transform: translate3d(0, 0, 0) skewX(0deg);
-  }
-}
 @keyframes skidLeft {
   from {
-    -webkit-transform: translate3d(-20%, 0, 0) skewX(0deg);
-            transform: translate3d(-20%, 0, 0) skewX(0deg);
+    transform: translate3d(-20%, 0, 0) skewX(0deg);
     opacity: 0;
   }
   50% {
-    -webkit-transform: translate3d(2%, 0, 0) skewX(-10deg);
-            transform: translate3d(2%, 0, 0) skewX(-10deg);
+    transform: translate3d(2%, 0, 0) skewX(-10deg);
     opacity: 1;
   }
   75% {
-    -webkit-transform: translate3d(-1%, 0, 0) skewX(10deg);
-            transform: translate3d(-1%, 0, 0) skewX(10deg);
+    transform: translate3d(-1%, 0, 0) skewX(10deg);
   }
   to {
-    -webkit-transform: translate3d(0, 0, 0) skewX(0deg);
-            transform: translate3d(0, 0, 0) skewX(0deg);
-  }
-}
-@-webkit-keyframes skidLeftBig {
-  from {
-    -webkit-transform: translate3d(-100%, 0, 0) skewX(0deg);
-            transform: translate3d(-100%, 0, 0) skewX(0deg);
-    opacity: 0;
-  }
-  50% {
-    -webkit-transform: translate3d(2%, 0, 0) skewX(-10deg);
-            transform: translate3d(2%, 0, 0) skewX(-10deg);
-    opacity: 1;
-  }
-  75% {
-    -webkit-transform: translate3d(-1%, 0, 0) skewX(10deg);
-            transform: translate3d(-1%, 0, 0) skewX(10deg);
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0) skewX(0deg);
-            transform: translate3d(0, 0, 0) skewX(0deg);
+    transform: translate3d(0, 0, 0) skewX(0deg);
   }
 }
 @keyframes skidLeftBig {
   from {
-    -webkit-transform: translate3d(-100%, 0, 0) skewX(0deg);
-            transform: translate3d(-100%, 0, 0) skewX(0deg);
-    opacity: 0;
-  }
-  50% {
-    -webkit-transform: translate3d(2%, 0, 0) skewX(-10deg);
-            transform: translate3d(2%, 0, 0) skewX(-10deg);
-    opacity: 1;
-  }
-  75% {
-    -webkit-transform: translate3d(-1%, 0, 0) skewX(10deg);
-            transform: translate3d(-1%, 0, 0) skewX(10deg);
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0) skewX(0deg);
-            transform: translate3d(0, 0, 0) skewX(0deg);
-  }
-}
-@-webkit-keyframes skidRight {
-  from {
-    -webkit-transform: translate3d(20%, 0, 0) skewX(0deg);
-            transform: translate3d(20%, 0, 0) skewX(0deg);
+    transform: translate3d(-100%, 0, 0) skewX(0deg);
     opacity: 0;
   }
   50% {
-    -webkit-transform: translate3d(-2%, 0, 0) skewX(10deg);
-            transform: translate3d(-2%, 0, 0) skewX(10deg);
+    transform: translate3d(2%, 0, 0) skewX(-10deg);
     opacity: 1;
   }
   75% {
-    -webkit-transform: translate3d(1%, 0, 0) skewX(-10deg);
-            transform: translate3d(1%, 0, 0) skewX(-10deg);
+    transform: translate3d(-1%, 0, 0) skewX(10deg);
   }
   to {
-    -webkit-transform: translate3d(0, 0, 0) skewX(0deg);
-            transform: translate3d(0, 0, 0) skewX(0deg);
+    transform: translate3d(0, 0, 0) skewX(0deg);
   }
 }
 @keyframes skidRight {
   from {
-    -webkit-transform: translate3d(20%, 0, 0) skewX(0deg);
-            transform: translate3d(20%, 0, 0) skewX(0deg);
+    transform: translate3d(20%, 0, 0) skewX(0deg);
     opacity: 0;
   }
   50% {
-    -webkit-transform: translate3d(-2%, 0, 0) skewX(10deg);
-            transform: translate3d(-2%, 0, 0) skewX(10deg);
+    transform: translate3d(-2%, 0, 0) skewX(10deg);
     opacity: 1;
   }
   75% {
-    -webkit-transform: translate3d(1%, 0, 0) skewX(-10deg);
-            transform: translate3d(1%, 0, 0) skewX(-10deg);
+    transform: translate3d(1%, 0, 0) skewX(-10deg);
   }
   to {
-    -webkit-transform: translate3d(0, 0, 0) skewX(0deg);
-            transform: translate3d(0, 0, 0) skewX(0deg);
-  }
-}
-@-webkit-keyframes skidRightBig {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(0deg);
-            transform: translate3d(100%, 0, 0) skewX(0deg);
-    opacity: 0;
-  }
-  50% {
-    -webkit-transform: translate3d(-2%, 0, 0) skewX(10deg);
-            transform: translate3d(-2%, 0, 0) skewX(10deg);
-    opacity: 1;
-  }
-  75% {
-    -webkit-transform: translate3d(1%, 0, 0) skewX(-10deg);
-            transform: translate3d(1%, 0, 0) skewX(-10deg);
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0) skewX(0deg);
-            transform: translate3d(0, 0, 0) skewX(0deg);
+    transform: translate3d(0, 0, 0) skewX(0deg);
   }
 }
 @keyframes skidRightBig {
   from {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(0deg);
-            transform: translate3d(100%, 0, 0) skewX(0deg);
+    transform: translate3d(100%, 0, 0) skewX(0deg);
     opacity: 0;
   }
   50% {
-    -webkit-transform: translate3d(-2%, 0, 0) skewX(10deg);
-            transform: translate3d(-2%, 0, 0) skewX(10deg);
+    transform: translate3d(-2%, 0, 0) skewX(10deg);
     opacity: 1;
   }
   75% {
-    -webkit-transform: translate3d(1%, 0, 0) skewX(-10deg);
-            transform: translate3d(1%, 0, 0) skewX(-10deg);
+    transform: translate3d(1%, 0, 0) skewX(-10deg);
   }
   to {
-    -webkit-transform: translate3d(0, 0, 0) skewX(0deg);
-            transform: translate3d(0, 0, 0) skewX(0deg);
-  }
-}
-@-webkit-keyframes shrinkIn {
-  from {
-    -webkit-transform: scale3d(1.3, 1.3, 1.3);
-            transform: scale3d(1.3, 1.3, 1.3);
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+    transform: translate3d(0, 0, 0) skewX(0deg);
   }
 }
 @keyframes shrinkIn {
   from {
-    -webkit-transform: scale3d(1.3, 1.3, 1.3);
-            transform: scale3d(1.3, 1.3, 1.3);
+    transform: scale3d(1.3, 1.3, 1.3);
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
-@-webkit-keyframes shrinkInBlur {
+@keyframes shrinkInBig {
   from {
-    -webkit-transform: scale3d(1.3, 1.3, 1.3);
-            transform: scale3d(1.3, 1.3, 1.3);
+    transform: scale3d(1.6, 1.6, 1.6);
     opacity: 0;
-    -webkit-filter: blur(5px);
-            filter: blur(5px);
   }
-  75% {
+  to {
     opacity: 1;
-    -webkit-filter: blur(0px);
-  }
-  100% {
-    -webkit-transform: scale3d(1, 1, 1);
-            transform: scale3d(1, 1, 1);
   }
 }
 @keyframes shrinkInBlur {
   from {
-    -webkit-transform: scale3d(1.3, 1.3, 1.3);
-            transform: scale3d(1.3, 1.3, 1.3);
+    transform: scale3d(1.3, 1.3, 1.3);
     opacity: 0;
-    -webkit-filter: blur(5px);
-            filter: blur(5px);
+    filter: blur(5px);
   }
   75% {
     opacity: 1;
-    -webkit-filter: blur(0px);
+    filter: blur(0.5px);
   }
   100% {
-    -webkit-transform: scale3d(1, 1, 1);
-            transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
   }
 }
 /* Custom Appearance animation classes */
 .skidRight, .animate__skidRight {
-  -webkit-animation-name: skidRight;
-          animation-name: skidRight;
+  animation-name: skidRight;
 }
 
 .skidRightBig, .animate__skidRightBig {
-  -webkit-animation-name: skidRightBig;
-          animation-name: skidRightBig;
+  animation-name: skidRightBig;
 }
 
 .skidLeft, .animate__skidLeft {
-  -webkit-animation-name: skidLeft;
-          animation-name: skidLeft;
+  animation-name: skidLeft;
 }
 
 .skidLeftBig, .animate__skidLeftBig {
-  -webkit-animation-name: skidLeftBig;
-          animation-name: skidLeftBig;
+  animation-name: skidLeftBig;
 }
 
 .shrinkIn, .animate__shrinkIn {
-  -webkit-animation-name: shrinkIn;
-          animation-name: shrinkIn;
+  animation-name: shrinkIn;
+}
+
+.shrinkInBig, .animate__shrinkInBig {
+  animation-name: shrinkInBig;
 }
 
 .shrinkInBlur, .animate__shrinkInBlur {
-  -webkit-animation-name: shrinkInBlur;
-          animation-name: shrinkInBlur;
+  animation-name: shrinkIn;
+}
+
+.shrinkInBlurAnyway, .animate__shrinkInBlurAnyway {
+  backface-visibility: hidden;
+  perspective: 1000;
+  transform: translate3d(0, 0, 0) translateZ(0);
+  animation-name: shrinkInBlur;
+}
+
+/* Animate.css overrides */
+section:not(.stack):not([data-appearance-can-start]) .animate__animated,
+section:not(.stack):not([data-appearance-can-start]) .animated,
+.fragment:not(.visible) .animate__animated,
+.fragment:not(.visible) .animated {
+  opacity: 0;
+  animation: none;
+  will-change: animation;
+}
+.reveal.overview section:not(.stack):not([data-appearance-can-start]) .animated,
+.reveal.overview section:not(.stack):not([data-appearance-can-start]) .animate__animated,
+.reveal.overview .fragment:not(.visible) .animated,
+.reveal.overview .fragment:not(.visible) .animate__animated {
+  visibility: visible;
+  animation: none;
+  opacity: 1;
+}
+
+.fragment.animate__animated:not(.visible), .fragment.animated:not(.visible) {
+  transition: opacity 0.3s ease-in-out !important;
+  opacity: 0;
+  animation: none;
+  will-change: animation;
+}
+.fragment.animate__animated.visible.animate__animated, .fragment.animate__animated.visible.animated, .fragment.animated.visible.animate__animated, .fragment.animated.visible.animated {
+  transition: none;
+}
+
+i.animate__animated, i.animated, span.animate__animated, span.animated {
+  display: inline-block;
+}
+
+.animate__animated.animationended,
+.animated.animationended {
+  animation: none;
 }
 
 .fast, .animate__fast {
-  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
-          animation-duration: calc(var(--animate-duration) * 0.8);
+  animation-duration: calc(var(--animate-duration) * 0.8);
 }
 
 .faster, .animate__faster {
-  -webkit-animation-duration: calc(var(--animate-duration) / 2);
-          animation-duration: calc(var(--animate-duration) / 2);
+  animation-duration: calc(var(--animate-duration) / 2);
 }
 
 .slow, .animate__slow {
-  -webkit-animation-duration: calc(var(--animate-duration) * 2);
-          animation-duration: calc(var(--animate-duration) * 2);
+  animation-duration: calc(var(--animate-duration) * 2);
 }
 
 .slower, .animate__slower {
-  -webkit-animation-duration: calc(var(--animate-duration) * 3);
-          animation-duration: calc(var(--animate-duration) * 3);
+  animation-duration: calc(var(--animate-duration) * 3);
 }
 
 .print-pdf .animated, .print-pdf .animate__animated,
@@ -309,18 +205,22 @@ span.animate__animated, span.animated {
 .print-pdf section:not(.stack):not([data-appearance-can-start]) .animate__animated {
   opacity: 1;
   visibility: visible;
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
 }
 .print-pdf .reveal .fragment {
   opacity: 1;
 }
 
 .reveal.sv .animated, .reveal.sv .animate__animated,
-.reveal.sv section:not(.stack):not([data-appearance-can-start]) .animated,
-.reveal.sv section:not(.stack):not([data-appearance-can-start]) .animate__animated {
+.reveal.sv section:not(.stack):not([data-appearance-can-start]) .animated:not(.fragment),
+.reveal.sv section:not(.stack):not([data-appearance-can-start]) .animate__animated:not(.fragment),
+.reveal.sv section:not(.stack):not([data-appearance-can-start]) .animated.fragment.visible,
+.reveal.sv section:not(.stack):not([data-appearance-can-start]) .animate__animated.fragment.visible, .reveal-viewport.sv .animated, .reveal-viewport.sv .animate__animated,
+.reveal-viewport.sv section:not(.stack):not([data-appearance-can-start]) .animated:not(.fragment),
+.reveal-viewport.sv section:not(.stack):not([data-appearance-can-start]) .animate__animated:not(.fragment),
+.reveal-viewport.sv section:not(.stack):not([data-appearance-can-start]) .animated.fragment.visible,
+.reveal-viewport.sv section:not(.stack):not([data-appearance-can-start]) .animate__animated.fragment.visible {
   opacity: 1;
   visibility: visible;
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
 }