[ADD] web: less mixins for animation and transition

1 files changed, 20 insertions, 0 deletions

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
@@ -197,6 +197,26 @@
 }
 
 // ------------------------------------------------------------------
+// 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
 // ------------------------------------------------------------------
 .o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {