mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-31 19:32:47 +00:00
yay for waindows pathing
This commit is contained in:
Scott Tolksdorf
361
shared/naturalcrit2/styles/animations.less
Normal file
361
shared/naturalcrit2/styles/animations.less
Normal file
@@ -0,0 +1,361 @@
|
||||
//Defaults
|
||||
@defaultDuration : 0.25s;
|
||||
@defaultEasing : ease;
|
||||
|
||||
//Animates all properties on an element
|
||||
.animateAll(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: all @duration @easing;
|
||||
-moz-transition: all @duration @easing;
|
||||
-o-transition: all @duration @easing;
|
||||
transition: all @duration @easing;
|
||||
}
|
||||
//Animates Specific property
|
||||
.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: @prop @duration @easing;
|
||||
-moz-transition: @prop @duration @easing;
|
||||
-o-transition: @prop @duration @easing;
|
||||
transition: @prop @duration @easing;
|
||||
}
|
||||
|
||||
.animateMany(...){
|
||||
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
|
||||
-webkit-transition-property: @value;
|
||||
-moz-transition-property: @value;
|
||||
-o-transition-property: @value;
|
||||
transition-property: @value;
|
||||
|
||||
.animateDuration();
|
||||
.animateEasing();
|
||||
}
|
||||
|
||||
.animateDuration(@duration : @defaultDuration){
|
||||
-webkit-transition-duration: @duration;
|
||||
-moz-transition-duration: @duration;
|
||||
-o-transition-duration: @duration;
|
||||
transition-duration: @duration;
|
||||
}
|
||||
|
||||
.animateEasing(@easing : @defaultEasing){
|
||||
-webkit-transition-timing-function: @easing;
|
||||
-moz-transition-timing-function: @easing;
|
||||
-o-transition-timing-function: @easing;
|
||||
transition-timing-function: @easing;
|
||||
}
|
||||
|
||||
|
||||
.transition (@prop, @duration: @defaultDuration) {
|
||||
-webkit-transition: @prop @duration, -webkit-transform @duration;
|
||||
-moz-transition: @prop @duration, -moz-transform @duration;
|
||||
-o-transition: @prop @duration, -o-transform @duration;
|
||||
-ms-transition: @prop @duration, -ms-transform @duration;
|
||||
transition: @prop @duration, transform @duration;
|
||||
}
|
||||
.transform (@transform) {
|
||||
-webkit-transform: @transform;
|
||||
-moz-transform: @transform;
|
||||
-o-transform: @transform;
|
||||
-ms-transform: @transform;
|
||||
transform: @transform;
|
||||
}
|
||||
|
||||
|
||||
.delay(@delay){
|
||||
animation-delay:@delay;
|
||||
-webkit-animation-delay:@delay;
|
||||
transition-delay:@delay;
|
||||
-webkit-transition-delay:@delay;
|
||||
}
|
||||
.keep(){
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
-ms-animation-fill-mode:forwards;
|
||||
-o-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
}
|
||||
|
||||
|
||||
.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s){
|
||||
&:nth-child(1){.delay(0*@delayInc + @initialDelay)}
|
||||
&:nth-child(2){.delay(1*@delayInc + @initialDelay)}
|
||||
&:nth-child(3){.delay(2*@delayInc + @initialDelay)}
|
||||
&:nth-child(4){.delay(3*@delayInc + @initialDelay)}
|
||||
&:nth-child(5){.delay(4*@delayInc + @initialDelay)}
|
||||
&:nth-child(6){.delay(5*@delayInc + @initialDelay)}
|
||||
&:nth-child(7){.delay(6*@delayInc + @initialDelay)}
|
||||
&:nth-child(8){.delay(7*@delayInc + @initialDelay)}
|
||||
&:nth-child(9){.delay(8*@delayInc + @initialDelay)}
|
||||
&:nth-child(10){.delay(9*@delayInc + @initialDelay)}
|
||||
&:nth-child(11){.delay(10*@delayInc + @initialDelay)}
|
||||
&:nth-child(12){.delay(11*@delayInc + @initialDelay)}
|
||||
&:nth-child(13){.delay(12*@delayInc + @initialDelay)}
|
||||
&:nth-child(14){.delay(13*@delayInc + @initialDelay)}
|
||||
&:nth-child(15){.delay(14*@delayInc + @initialDelay)}
|
||||
&:nth-child(16){.delay(15*@delayInc + @initialDelay)}
|
||||
&:nth-child(17){.delay(16*@delayInc + @initialDelay)}
|
||||
&:nth-child(18){.delay(17*@delayInc + @initialDelay)}
|
||||
&:nth-child(19){.delay(18*@delayInc + @initialDelay)}
|
||||
&:nth-child(20){.delay(19*@delayInc + @initialDelay)}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.createFrames(@name, @from, @to){
|
||||
@frames: {
|
||||
from { @from(); }
|
||||
to { @to(); }
|
||||
};
|
||||
@-webkit-keyframes @name {@frames();}
|
||||
@-moz-keyframes @name {@frames();}
|
||||
@-ms-keyframes @name {@frames();}
|
||||
@-o-keyframes @name {@frames();}
|
||||
@keyframes @name {@frames();}
|
||||
}
|
||||
|
||||
.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-animation-name: @name;
|
||||
-moz-animation-name: @name;
|
||||
-ms-animation-name: @name;
|
||||
animation-name: @name;
|
||||
-webkit-animation-duration: @duration;
|
||||
-moz-animation-duration: @duration;
|
||||
-ms-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
-webkit-animation-timing-function: @easing;
|
||||
-moz-animation-timing-function: @easing;
|
||||
-ms-animation-timing-function: @easing;
|
||||
animation-timing-function: @easing;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/***************************
|
||||
Standard Animations
|
||||
****************************/
|
||||
|
||||
.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeIn; @duration; @easing);
|
||||
.createFrames(fadeIn,
|
||||
{ opacity : 0; },
|
||||
{ opacity : 1; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInDown; @duration; @easing);
|
||||
.createFrames(fadeInDown,
|
||||
{ opacity : 0; .transform(translateY(20px));},
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInTop; @duration; @easing);
|
||||
.createFrames(fadeInTop,
|
||||
{ opacity : 0; .transform(translateY(-20px)); },
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInLeft; @duration; @easing);
|
||||
.createFrames(fadeInLeft,
|
||||
{ opacity: 0; .transform(translateX(-20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInRight; @duration; @easing);
|
||||
.createFrames(fadeInRight,
|
||||
{ opacity: 0; .transform(translateX(20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOut; @duration; @easing);
|
||||
.createFrames(fadeOut,
|
||||
{ opacity : 1; },
|
||||
{ opacity : 0; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutDown; @duration; @easing);
|
||||
.createFrames(fadeOutDown,
|
||||
{ opacity : 1; .transform(translateY(0)); visibility: visible;},
|
||||
{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutTop; @duration; @easing);
|
||||
.createFrames(fadeOutTop,
|
||||
{ opacity : 1; .transform(translateY(0)); },
|
||||
{ opacity : 0; .transform(translateY(-20px)); }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutLeft; @duration; @easing);
|
||||
.createFrames(fadeOutLeft,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(-20px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutRight; @duration; @easing);
|
||||
.createFrames(fadeOutRight,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(20px));}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/***************************
|
||||
Fun Animations
|
||||
****************************/
|
||||
|
||||
.spin(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(spin, @duration, @easing);
|
||||
.spinKeyFrames(){
|
||||
from { .transform(rotate(0deg)); }
|
||||
to { .transform(rotate(360deg)); }
|
||||
}
|
||||
@-webkit-keyframes spin {.spinKeyFrames();}
|
||||
@-moz-keyframes spin {.spinKeyFrames();}
|
||||
@-ms-keyframes spin {.spinKeyFrames();}
|
||||
@-o-keyframes spin {.spinKeyFrames();}
|
||||
@keyframes spin {.spinKeyFrames();}
|
||||
}
|
||||
|
||||
.bounce(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(bounce, @duration, @easing);
|
||||
.bounceKeyFrames(){
|
||||
0%, 20%, 50%, 80%, 100% { .transform(translateY(0));}
|
||||
40% { .transform(translateY(-30px));}
|
||||
60% { .transform(translateY(-15px));}
|
||||
}
|
||||
@-webkit-keyframes bounce {.bounceKeyFrames();}
|
||||
@-moz-keyframes bounce {.bounceKeyFrames();}
|
||||
@-ms-keyframes bounce {.bounceKeyFrames();}
|
||||
@-o-keyframes bounce {.bounceKeyFrames();}
|
||||
@keyframes bounce {.bounceKeyFrames();}
|
||||
}
|
||||
|
||||
.pulse(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(pulse, @duration, @easing);
|
||||
.pulseKeyFrames(){
|
||||
0% { .transform(scale(1));}
|
||||
50% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes pulse {.pulseKeyFrames();}
|
||||
@-moz-keyframes pulse {.pulseKeyFrames();}
|
||||
@-ms-keyframes pulse {.pulseKeyFrames();}
|
||||
@-o-keyframes pulse {.pulseKeyFrames();}
|
||||
@keyframes pulse {.pulseKeyFrames();}
|
||||
}
|
||||
|
||||
.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(rubberBand, @duration, @easing);
|
||||
.rubberBandKeyFrames(){
|
||||
0% {.transform(scale(1));}
|
||||
30% {.transform(scaleX(1.25) scaleY(0.75));}
|
||||
40% {.transform(scaleX(0.75) scaleY(1.25));}
|
||||
60% {.transform(scaleX(1.15) scaleY(0.85));}
|
||||
100% {.transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-o-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
}
|
||||
|
||||
.shake(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(shake, @duration, @easing);
|
||||
.shakeKeyFrames(){
|
||||
0%, 100% {.transform( translateX(0));}
|
||||
10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));}
|
||||
20%, 40%, 60%, 80% {.transform( translateX(10px));}
|
||||
}
|
||||
@-webkit-keyframes shake {.shakeKeyFrames();}
|
||||
@-moz-keyframes shake {.shakeKeyFrames();}
|
||||
@-ms-keyframes shake {.shakeKeyFrames();}
|
||||
@-o-keyframes shake {.shakeKeyFrames();}
|
||||
@keyframes shake {.shakeKeyFrames();}
|
||||
}
|
||||
|
||||
.swing(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: top center;
|
||||
-ms-transform-origin: top center;
|
||||
transform-origin: top center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
80% {.transform(rotate(-5deg));}
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.twist(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
80% {.transform(rotate(-5deg));}
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.wobble(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(wobble, @duration, @easing);
|
||||
.wobbleKeyFrames(){
|
||||
0% {.transform(translateX(0%));}
|
||||
15% {.transform(translateX(-25%) rotate(-5deg));}
|
||||
30% {.transform(translateX(20%) rotate(3deg));}
|
||||
45% {.transform(translateX(-15%) rotate(-3deg));}
|
||||
60% {.transform(translateX(10%) rotate(2deg));}
|
||||
75% {.transform(translateX(-5%) rotate(-1deg));}
|
||||
100% {.transform(translateX(0%));}
|
||||
}
|
||||
@-webkit-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-moz-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-ms-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-o-keyframes wobble {.wobbleKeyFrames();}
|
||||
@keyframes wobble {.wobbleKeyFrames();}
|
||||
}
|
||||
|
||||
.popIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(popIn, @duration, @easing);
|
||||
.popInKeyFrames(){
|
||||
0% { .transform(scale(0));}
|
||||
70% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes popIn {.popInKeyFrames();}
|
||||
@-moz-keyframes popIn {.popInKeyFrames();}
|
||||
@-ms-keyframes popIn {.popInKeyFrames();}
|
||||
@-o-keyframes popIn {.popInKeyFrames();}
|
||||
@keyframes popIn {.popInKeyFrames();}
|
||||
}
|
||||
Reference in New Issue
Block a user