mirror of
https://github.com/skalavala/mysmarthome.git
synced 2025-08-21 04:33:22 +00:00
Back Alive!
This commit is contained in:
Mahasri Kalavala
452
docs/_sass/_animations.scss
Executable file
452
docs/_sass/_animations.scss
Executable file
@@ -0,0 +1,452 @@
|
||||
/* ==========================================================================
|
||||
Animations
|
||||
========================================================================== */
|
||||
|
||||
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
|
||||
|
||||
/*
|
||||
Fade in
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-o-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
-moz-animation-name: fadeIn;
|
||||
-o-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
-moz-animation-name: fadeInDown;
|
||||
-o-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDownBig {
|
||||
-webkit-animation-name: fadeInDownBig;
|
||||
-moz-animation-name: fadeInDownBig;
|
||||
-o-animation-name: fadeInDownBig;
|
||||
animation-name: fadeInDownBig;
|
||||
}
|
||||
|
||||
/*
|
||||
Bounce
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
-moz-transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-o-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
-o-transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
-o-transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
-o-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceIn {
|
||||
-webkit-animation-name: bounceIn;
|
||||
-moz-animation-name: bounceIn;
|
||||
-o-animation-name: bounceIn;
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-moz-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-o-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInDown {
|
||||
-webkit-animation-name: bounceInDown;
|
||||
-moz-animation-name: bounceInDown;
|
||||
-o-animation-name: bounceInDown;
|
||||
animation-name: bounceInDown;
|
||||
}
|
||||
|
||||
/*
|
||||
Drop
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes drop {
|
||||
0% {
|
||||
-webkit-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes drop {
|
||||
0% {
|
||||
-moz-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes drop {
|
||||
0% {
|
||||
-o-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.drop {
|
||||
-webkit-animation-name: drop;
|
||||
-moz-animation-name: drop;
|
||||
-o-animation-name: drop;
|
||||
animation-name: drop;
|
||||
}
|
||||
|
||||
/*
|
||||
DL Menu In/Out
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes MenuAnimOut {
|
||||
100% {
|
||||
-webkit-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes MenuAnimOut {
|
||||
100% {
|
||||
-moz-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes MenuAnimOut {
|
||||
100% {
|
||||
transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes MenuAnimIn {
|
||||
0% {
|
||||
-webkit-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes MenuAnimIn {
|
||||
0% {
|
||||
-moz-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes MenuAnimIn {
|
||||
0% {
|
||||
transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
-webkit-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
-moz-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user