Adds an `animation` and `transform-rotate` mixin to help with the animation.
Also creates a mixin for the keyframes and uses them for webkit, moz and
opera specific declerations.
Change-Id: I167dc5e5a2f43f64c5029864e76d42fcc82af622
--- /dev/null
+.animation (...) {
+ -webkit-animation: @arguments;
+ -moz-animation: @arguments;
+ -o-animation: @arguments;
+ animation: @arguments;
+}
+
+.transform-rotate (@deg) {
+ -webkit-transform: rotate(@deg);
+ -moz-transform: rotate(@deg);
+ transform: rotate(@deg);
+}
\ No newline at end of file
// This is a separate file because importing the mixin causes
// the keyframes blocks to be included in the output, regardless
// of whether .rotation is used.
// This is a separate file because importing the mixin causes
// the keyframes blocks to be included in the output, regardless
// of whether .rotation is used.
-@-webkit-keyframes rotate {
+@import "mediawiki.mixins.animation";
+
+.rotate-frames () {
- -webkit-transform:rotate(0deg);
+ .transform-rotate(0deg);
- -webkit-transform:rotate(360deg);
+ .transform-rotate(360deg);
+@-webkit-keyframes rotate {
+ .rotate-frames;
+}
+
+@-moz-keyframes rotate {
+ .rotate-frames;
+}
+
+@-o-keyframes rotate {
+ .rotate-frames;
+}
+
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-.rotation(@time) {
- -webkit-animation-name: rotate;
- -webkit-animation-duration: @time;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- animation-name: rotate;
- animation-duration: @time;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
+.rotation( @time ) {
+ .animation(rotate, @time, infinite, linear);