diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less
index a3100f931f5..9adca6f6679 100644
--- a/addons/web/static/src/less/utils.less
+++ b/addons/web/static/src/less/utils.less
@@ -196,6 +196,26 @@
     transition: @property @duration @timing-function @transition-delay;
 }
 
+// ------------------------------------------------------------------
+// Animation
+// ------------------------------------------------------------------
+.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
+    -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
+    -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
+    -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
+    animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
+}
+
+// ------------------------------------------------------------------
+// Transition
+// ------------------------------------------------------------------
+.o-transition(@property: all, @duration: 0s, @timing-function: easy, @transition-delay: 0s) {
+    -webkit-transition: @property @duration @timing-function @transition-delay;
+    -moz-transition: @property @duration @timing-function @transition-delay;
+    -o-transition: @property @duration @timing-function @transition-delay;
+    transition: @property @duration @timing-function @transition-delay;
+}
+
 // ------------------------------------------------------------------
 // Position absolute
 // ------------------------------------------------------------------