--- /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.
-@-webkit-keyframes rotate {
+@import "mediawiki.mixins.animation";
+
+.rotate-frames () {
from {
- -webkit-transform:rotate(0deg);
+ .transform-rotate(0deg);
}
to {
- -webkit-transform:rotate(360deg);
+ .transform-rotate(360deg);
}
}
+@-webkit-keyframes rotate {
+ .rotate-frames;
+}
+
+@-moz-keyframes rotate {
+ .rotate-frames;
+}
+
+@-o-keyframes rotate {
+ .rotate-frames;
+}
+
@keyframes rotate {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+ .rotate-frames;
}
-.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);
}