diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 23585b057e2..2d21949a5ed 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1728,6 +1728,19 @@ ul.o_checklist > li.o_checked::after {
     animation-name: o_anim_rotate_in_down_right;
 }
 
+@keyframes o_anim_zoom_out {
+    0% {
+        opacity: 0;
+        transform: scale(1.3);
+    }
+    100% {
+        opacity: 1;
+    }
+}
+.o_anim_zoom_out {
+    animation-name: o_anim_zoom_out;
+}
+
 @keyframes o_anim_zoom_in {
     0% {
         opacity: 0;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 975868c4ece..d6c6423c9dd 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1230,6 +1230,7 @@
             <we-button data-select-class="o_anim_rotate_in_down_left">Rotate In-Down-Left</we-button>
             <we-button data-select-class="o_anim_rotate_in_down_right">Rotate In-Down-Right</we-button>
             <we-divider/>
+            <we-button data-select-class="o_anim_zoom_out">Zoom Out</we-button>
             <we-button data-select-class="o_anim_zoom_in">Zoom In</we-button>
             <we-button data-select-class="o_anim_zoom_in_down">Zoom In-Down</we-button>
             <we-button data-select-class="o_anim_zoom_in_left">Zoom In-Left</we-button>