public/homebrewery
1
0
Fork 0
mirror of https://github.com/stolksdorf/homebrewery.git synced 2025-12-22 06:31:29 +00:00
Code Issues Releases Wiki Activity
Files
htmlValidate
homebrewery/shared/naturalcrit/styles/animations.less
Scott Tolksdorf 626cba6062 Newlines
2016-05-28 09:41:05 -04:00

362 lines
12 KiB
Plaintext
Raw Permalink Blame History

//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 View Git Blame Copy Permalink