.mwe-popups-translate(@x, @y) { -webkit-transform: translate(@x, @y); -moz-transform: translate(@x, @y); -ms-transform: translate(@x, @y); -o-transform: translate(@x, @y); transform: translate(@x, @y); } .mwe-popups-animation(...) { -webkit-animation: @arguments; -moz-animation: @arguments; -o-animation: @arguments; animation: @arguments; /* Leave the element in its final animation state */ -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */ -moz-animation-fill-mode: forwards; /* FF 5+ */ -o-animation-fill-mode: forwards; /* not implemented yet */ -ms-animation-fill-mode: forwards; /* IE 10+ */ animation-fill-mode: forwards; /* when the spec is finished */ } @-webkit-keyframes mwe-popups-fade-in { .mwe-popups-fade-in-frames; } @-moz-keyframes mwe-popups-fade-in { .mwe-popups-fade-in-frames; } @-o-keyframes mwe-popups-fade-in { .mwe-popups-fade-in-frames; } @keyframes mwe-popups-fade-in { .mwe-popups-fade-in-frames; } @-webkit-keyframes mwe-popups-fade-out { .mwe-popups-fade-out-frames; } @-moz-keyframes mwe-popups-fade-out { .mwe-popups-fade-out-frames; } @-o-keyframes mwe-popups-fade-out { .mwe-popups-fade-out-frames; } @keyframes mwe-popups-fade-out { .mwe-popups-fade-out-frames; } .mwe-popups-fade-in-frames() { 0% { opacity: 0; .mwe-popups-translate(0, 20px); } 100% { opacity: 1; .mwe-popups-translate(0, 0); } } .mwe-popups-fade-out-frames() { 0% { opacity: 1; .mwe-popups-translate(0, 0); } 100% { opacity: 0; .mwe-popups-translate(0, 20px); } } .mwe-popups-fade-in { .mwe-popups-animation(mwe-popups-fade-in, 0.3s); } .mwe-popups-fade-out { .mwe-popups-animation(mwe-popups-fade-out, 0.15s); }