diff --git a/blueprints/modular/slideshowext.yaml b/blueprints/modular/slideshowext.yaml
index 473c726..74cd9f5 100644
--- a/blueprints/modular/slideshowext.yaml
+++ b/blueprints/modular/slideshowext.yaml
@@ -5,6 +5,14 @@ extends@:
 form:
   validation: loose
   fields:
+    header.transduration:
+      type: text
+      label: Übergangsdauer
+      help: 'Dauer des Übergangs (Fade-In bzw. -Out) zwischen zwei Slides in Sekunden'
+      default: 2
+      validate:
+        required: true
+        type: int
     header.slides:
       type: list
       style: vertical
diff --git a/css/slideshowext.css b/css/slideshowext.css
index 5a5c517..43b552b 100644
--- a/css/slideshowext.css
+++ b/css/slideshowext.css
@@ -19,7 +19,6 @@
     width: 100%;
     height: auto;
     overflow: hidden;
-    transition: visibility 0s 2s, opacity 2s linear;
     box-sizing: border-box;
     white-space: normal;
     justify-content: center;
diff --git a/templates/modular/slideshowext.html.twig b/templates/modular/slideshowext.html.twig
index ed384ed..71e6fa5 100644
--- a/templates/modular/slideshowext.html.twig
+++ b/templates/modular/slideshowext.html.twig
@@ -4,10 +4,14 @@
     {% do assets.addCss('theme://css/slideshowext.css', 90) %}
     {% set slideStyle %}
         {% for image in slides %}
+            .slideshow-ext > .slide-content {
+                transition: visibility 0s {{ page.header.transduration }}s, opacity {{ page.header.transduration }}s linear;
+            }
+
             #slide{{ loop.index }}:checked ~ #slide-content{{ loop.index }} {
                 opacity: 1;
                 visibility: visible;
-                transition: visibility 0s 2s, opacity 2s 2s linear;
+                transition: visibility 0s {{ page.header.transduration }}s, opacity {{ page.header.transduration }}s {{ page.header.transduration }}s linear;
             }
         {% endfor %}
         {% for image in slides %}