diff options
Diffstat (limited to 'static/css/sass/_animations.scss')
| -rw-r--r-- | static/css/sass/_animations.scss | 452 |
1 files changed, 452 insertions, 0 deletions
diff --git a/static/css/sass/_animations.scss b/static/css/sass/_animations.scss new file mode 100644 index 0000000..27e5061 --- /dev/null +++ b/static/css/sass/_animations.scss @@ -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; + } +}
\ No newline at end of file |