Benjamin Vray
517bc3db87
Before this commit, when animated elements with a css translate
overflowed the #wrapwrap (before and during animations), a horizontal
scrollbar was visible on the #wrapwrap until the end of the animation.
After this commit, the horizontal scrollbar is no longer visible at
any time during the animations.
task-2215118
closes odoo/design-themes#469
X-original-commit: 22e83be4f3
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
1075 lines
23 KiB
SCSS
1075 lines
23 KiB
SCSS
/*
|
|
=====================================
|
|
======== Utility classes
|
|
=====================================
|
|
*/
|
|
.o_animate {
|
|
animation-duration: 1s;
|
|
animation-fill-mode: both;
|
|
transform: translate3d(0,0,0); // force GPU acceleration
|
|
backface-visibility: hidden; // avoid flickering
|
|
text-rendering: geometricPrecision; // take care of animated titles
|
|
visibility: hidden;
|
|
|
|
&:not(.o_animating) {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
.o_animate_preview {
|
|
visibility: visible;
|
|
}
|
|
.o_wanim_overflow_x_hidden {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
@-moz-keyframes o_animate_timeline_duration {
|
|
0% { width: 0; }
|
|
100% { width: 100%; }
|
|
}
|
|
@-webkit-keyframes o_animate_timeline_duration {
|
|
0% { width: 0; }
|
|
100% { width: 100%; }
|
|
}
|
|
@keyframes o_animate_timeline_duration {
|
|
0% { width: 0; }
|
|
100% { width: 100%; }
|
|
}
|
|
@-moz-keyframes o_animate_timeline_delay {
|
|
0% { width: 0; }
|
|
100% { width: 100%; }
|
|
}
|
|
@-webkit-keyframes o_animate_timeline_delay {
|
|
0% { width: 0; }
|
|
100% { width: 100%; }
|
|
}
|
|
@keyframes o_animate_timeline_delay {
|
|
0% { width: 0; }
|
|
100% { width: 100%; }
|
|
}
|
|
@-moz-keyframes o_anim_bounce_in {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
20% {
|
|
transform: scale(1.1);
|
|
}
|
|
40% {
|
|
transform: scale(0.9);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale(1.03);
|
|
}
|
|
80% {
|
|
transform: scale(0.97);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_bounce_in {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
20% {
|
|
transform: scale(1.1);
|
|
}
|
|
40% {
|
|
transform: scale(0.9);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale(1.03);
|
|
}
|
|
80% {
|
|
transform: scale(0.97);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes o_anim_bounce_in {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
20% {
|
|
transform: scale(1.1);
|
|
}
|
|
40% {
|
|
transform: scale(0.9);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale(1.03);
|
|
}
|
|
80% {
|
|
transform: scale(0.97);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.o_anim_bounce_in {
|
|
animation-name: o_anim_bounce_in;
|
|
}
|
|
@-moz-keyframes o_anim_bounce_in_down {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, -3000px);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(0, 25px);
|
|
}
|
|
75% {
|
|
transform: translate(0, -10px);
|
|
}
|
|
90% {
|
|
transform: translate(0, 5px);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_bounce_in_down {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, -3000px);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(0, 25px);
|
|
}
|
|
75% {
|
|
transform: translate(0, -10px);
|
|
}
|
|
90% {
|
|
transform: translate(0, 5px);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes o_anim_bounce_in_down {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, -3000px);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(0, 25px);
|
|
}
|
|
75% {
|
|
transform: translate(0, -10px);
|
|
}
|
|
90% {
|
|
transform: translate(0, 5px);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
.o_anim_bounce_in_down {
|
|
animation-name: o_anim_bounce_in_down;
|
|
}
|
|
@-moz-keyframes o_anim_bounce_in_left {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-3000px, 0);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(25px, 0);
|
|
}
|
|
75% {
|
|
transform: translate(-10px, 0);
|
|
}
|
|
90% {
|
|
transform: translate(5px, 0);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_bounce_in_left {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-3000px, 0);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(25px, 0);
|
|
}
|
|
75% {
|
|
transform: translate(-10px, 0);
|
|
}
|
|
90% {
|
|
transform: translate(5px, 0);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes o_anim_bounce_in_left {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-3000px, 0);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(25px, 0);
|
|
}
|
|
75% {
|
|
transform: translate(-10px, 0);
|
|
}
|
|
90% {
|
|
transform: translate(5px, 0);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
.o_anim_bounce_in_left {
|
|
animation-name: o_anim_bounce_in_left;
|
|
}
|
|
@-moz-keyframes o_anim_bounce_in_right {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(3000px, 0);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(-25px, 0);
|
|
}
|
|
75% {
|
|
transform: translate(10px, 0);
|
|
}
|
|
90% {
|
|
transform: translate(-5px, 0);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_bounce_in_right {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(3000px, 0);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(-25px, 0);
|
|
}
|
|
75% {
|
|
transform: translate(10px, 0);
|
|
}
|
|
90% {
|
|
transform: translate(-5px, 0);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes o_anim_bounce_in_right {
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(3000px, 0);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: translate(-25px, 0);
|
|
}
|
|
75% {
|
|
transform: translate(10px, 0);
|
|
}
|
|
90% {
|
|
transform: translate(-5px, 0);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
.o_anim_bounce_in_right {
|
|
animation-name: o_anim_bounce_in_right;
|
|
}
|
|
@-moz-keyframes o_anim_fade_in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
@-webkit-keyframes o_anim_fade_in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
@keyframes o_anim_fade_in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
.o_anim_fade_in {
|
|
animation-name: o_anim_fade_in;
|
|
}
|
|
@-moz-keyframes o_anim_fade_in_down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, -100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_fade_in_down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, -100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes o_anim_fade_in_down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, -100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
.o_anim_fade_in_down {
|
|
animation-name: o_anim_fade_in_down;
|
|
}
|
|
@-moz-keyframes o_anim_fade_in_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_fade_in_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes o_anim_fade_in_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
.o_anim_fade_in_left {
|
|
animation-name: o_anim_fade_in_left;
|
|
}
|
|
@-moz-keyframes o_anim_fade_in_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_fade_in_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes o_anim_fade_in_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(100%, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
.o_anim_fade_in_right {
|
|
animation-name: o_anim_fade_in_right;
|
|
}
|
|
@-moz-keyframes o_anim_fade_in_up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, 100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_fade_in_up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, 100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes o_anim_fade_in_up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, 100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
.o_anim_fade_in_up {
|
|
animation-name: o_anim_fade_in_up;
|
|
}
|
|
@-moz-keyframes o_anim_fade_out {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@-webkit-keyframes o_anim_fade_out {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@keyframes o_anim_fade_out {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
.o_anim_fade_out {
|
|
animation-name: o_anim_fade_out;
|
|
}
|
|
@-moz-keyframes o_anim_rotate_in {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: center;
|
|
transform: rotate(-200deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: center;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_rotate_in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: rotate(-200deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
@keyframes o_anim_rotate_in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: rotate(-200deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
.o_anim_rotate_in {
|
|
animation-name: o_anim_rotate_in;
|
|
}
|
|
@-moz-keyframes o_anim_rotate_in_down_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: left bottom;
|
|
transform: rotate(-45deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_rotate_in_down_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: left bottom;
|
|
transform: rotate(-45deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
@keyframes o_anim_rotate_in_down_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: left bottom;
|
|
transform: rotate(-45deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
.o_anim_rotate_in_down_left {
|
|
animation-name: o_anim_rotate_in_down_left;
|
|
}
|
|
@-moz-keyframes o_anim_rotate_in_down_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: right bottom;
|
|
transform: rotate(45deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_rotate_in_down_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: right bottom;
|
|
transform: rotate(45deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
@keyframes o_anim_rotate_in_down_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: right bottom;
|
|
transform: rotate(45deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
.o_anim_rotate_in_down_right {
|
|
animation-name: o_anim_rotate_in_down_right;
|
|
}
|
|
@-moz-keyframes o_anim_zoom_in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_zoom_in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes o_anim_zoom_in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.o_anim_zoom_in {
|
|
animation-name: o_anim_zoom_in;
|
|
}
|
|
@-moz-keyframes o_anim_zoom_in_down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_zoom_in_down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
@keyframes o_anim_zoom_in_down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
.o_anim_zoom_in_down {
|
|
animation-name: o_anim_zoom_in_down;
|
|
}
|
|
@-moz-keyframes o_anim_zoom_in_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_zoom_in_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
@keyframes o_anim_zoom_in_left {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
.o_anim_zoom_in_left {
|
|
animation-name: o_anim_zoom_in_left;
|
|
}
|
|
@-moz-keyframes o_anim_zoom_in_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_zoom_in_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
@keyframes o_anim_zoom_in_right {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
.o_anim_zoom_in_right {
|
|
animation-name: o_anim_zoom_in_right;
|
|
}
|
|
@-moz-keyframes o_anim_flash {
|
|
0%, 50%, 100% { opacity: 1; }
|
|
25%, 75% { opacity: 0; }
|
|
}
|
|
@-webkit-keyframes o_anim_flash {
|
|
0%, 50%, 100% { opacity: 1; }
|
|
25%, 75% { opacity: 0; }
|
|
}
|
|
@keyframes o_anim_flash {
|
|
0%, 50%, 100% { opacity: 1; }
|
|
25%, 75% { opacity: 0; }
|
|
}
|
|
.o_anim_flash {
|
|
animation-name: o_anim_flash;
|
|
}
|
|
@-moz-keyframes o_anim_pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
@-webkit-keyframes o_anim_pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
@keyframes o_anim_pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
.o_anim_pulse {
|
|
animation-name: o_anim_pulse;
|
|
}
|
|
@-moz-keyframes o_anim_shake {
|
|
0%, 100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
10%, 30%, 50%, 70%, 90% {
|
|
transform: translate(-10px, 0);
|
|
}
|
|
20%, 40%, 60%, 80% {
|
|
transform: translate(10px, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_shake {
|
|
0%, 100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
10%, 30%, 50%, 70%, 90% {
|
|
transform: translate(-10px, 0);
|
|
}
|
|
20%, 40%, 60%, 80% {
|
|
transform: translate(10px, 0);
|
|
}
|
|
}
|
|
@keyframes o_anim_shake {
|
|
0%, 100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
10%, 30%, 50%, 70%, 90% {
|
|
transform: translate(-10px, 0);
|
|
}
|
|
20%, 40%, 60%, 80% {
|
|
transform: translate(10px, 0);
|
|
}
|
|
}
|
|
.o_anim_shake {
|
|
animation-name: o_anim_shake;
|
|
}
|
|
@-moz-keyframes o_anim_tada {
|
|
0% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
10%, 20% {
|
|
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
30%, 50%, 70%, 90% {
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
40%, 60%, 80% {
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
100% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_tada {
|
|
0% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
10%, 20% {
|
|
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
30%, 50%, 70%, 90% {
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
40%, 60%, 80% {
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
100% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
@keyframes o_anim_tada {
|
|
0% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
10%, 20% {
|
|
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
30%, 50%, 70%, 90% {
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
40%, 60%, 80% {
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
100% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
.o_anim_tada {
|
|
animation-name: o_anim_tada;
|
|
}
|
|
@-moz-keyframes o_anim_flip_in_x {
|
|
0% {
|
|
perspective: 400px;
|
|
transform: rotateX(90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
perspective: 400px;
|
|
transform: rotateX(-20deg);
|
|
transition-timing-function: ease-in;
|
|
}
|
|
60% {
|
|
perspective: 400px;
|
|
transform: rotateX(10deg);
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
perspective: 400px;
|
|
transform: rotateX(-5deg);
|
|
}
|
|
100% {
|
|
perspective: 400px;
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_flip_in_x {
|
|
0% {
|
|
perspective: 400px;
|
|
transform: rotateX(90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
perspective: 400px;
|
|
transform: rotateX(-20deg);
|
|
transition-timing-function: ease-in;
|
|
}
|
|
60% {
|
|
perspective: 400px;
|
|
transform: rotateX(10deg);
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
perspective: 400px;
|
|
transform: rotateX(-5deg);
|
|
}
|
|
100% {
|
|
perspective: 400px;
|
|
}
|
|
}
|
|
@keyframes o_anim_flip_in_x {
|
|
0% {
|
|
perspective: 400px;
|
|
transform: rotateX(90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
perspective: 400px;
|
|
transform: rotateX(-20deg);
|
|
transition-timing-function: ease-in;
|
|
}
|
|
60% {
|
|
perspective: 400px;
|
|
transform: rotateX(10deg);
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
perspective: 400px;
|
|
transform: rotateX(-5deg);
|
|
}
|
|
100% {
|
|
perspective: 400px;
|
|
}
|
|
}
|
|
.o_anim_flip_in_x {
|
|
backface-visibility: visible;
|
|
animation-name: o_anim_flip_in_x;
|
|
}
|
|
@-moz-keyframes o_anim_flip_in_y {
|
|
0% {
|
|
perspective: 400px;
|
|
transform: rotateY(90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
perspective: 400px;
|
|
transform: rotateY(-20deg);
|
|
transition-timing-function: ease-in;
|
|
}
|
|
60% {
|
|
perspective: 400px;
|
|
transform: rotateY(10deg);
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
perspective: 400px;
|
|
transform: rotateY(-5deg);
|
|
}
|
|
100% {
|
|
perspective: 400px;
|
|
}
|
|
}
|
|
@-webkit-keyframes o_anim_flip_in_y {
|
|
0% {
|
|
perspective: 400px;
|
|
transform: rotateY(90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
perspective: 400px;
|
|
transform: rotateY(-20deg);
|
|
transition-timing-function: ease-in;
|
|
}
|
|
60% {
|
|
perspective: 400px;
|
|
transform: rotateY(10deg);
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
perspective: 400px;
|
|
transform: rotateY(-5deg);
|
|
}
|
|
100% {
|
|
perspective: 400px;
|
|
}
|
|
}
|
|
@keyframes o_anim_flip_in_y {
|
|
0% {
|
|
perspective: 400px;
|
|
transform: rotateY(90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
perspective: 400px;
|
|
transform: rotateY(-20deg);
|
|
transition-timing-function: ease-in;
|
|
}
|
|
60% {
|
|
perspective: 400px;
|
|
transform: rotateY(10deg);
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
perspective: 400px;
|
|
transform: rotateY(-5deg);
|
|
}
|
|
100% {
|
|
perspective: 400px;
|
|
}
|
|
}
|
|
.o_anim_flip_in_y {
|
|
backface-visibility: visible;
|
|
animation-name: o_anim_flip_in_y;
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// Compatibility <= 13.0
|
|
//------------------------------------------------------------------------------
|
|
|
|
.o_anim_dur500 {
|
|
animation-duration: 500ms;
|
|
}
|
|
.o_anim_dur1500 {
|
|
animation-duration: 1500ms;
|
|
}
|
|
.o_anim_dur2000 {
|
|
animation-duration: 2000ms;
|
|
}
|
|
.o_anim_dur2500 {
|
|
animation-duration: 2500ms;
|
|
}
|
|
.o_anim_dur3000 {
|
|
animation-duration: 3000ms;
|
|
}
|
|
.o_anim_del500 {
|
|
animation-delay: 500ms;
|
|
}
|
|
.o_anim_del1000 {
|
|
animation-delay: 1000ms;
|
|
}
|
|
.o_anim_del1500 {
|
|
animation-delay: 1500ms;
|
|
}
|
|
.o_anim_del2000 {
|
|
animation-delay: 2000ms;
|
|
}
|
|
.o_anim_del2500 {
|
|
animation-delay: 2500ms;
|
|
}
|