sharpetronics/crunchbutton
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

partial #1561. made fade transition fade into eachother, rather than fadeing in and out at the same time.

Browse Source
This commit is contained in:
arzynik 2013-11-29 13:16:26 -08:00
parent fcb41c7c53
commit 143b03ab58
1 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
www/assets/css/style-animations.css
View File

@ -1,20 +1,27 @@
/* make sure hardware acceleration is on in case its not for some reason */
.animation-fade.ng-enter, .animation-fade.ng-leave,
.animation-push.ng-enter, .animation-push.ng-leave,
.animation-pop.ng-enter, .animation-pop.ng-leave {
-webkit-transform: translateZ(0);
}
/* animation-fade stuff */
.animation-fade.ng-enter, .animation-fade.ng-leave {
-webkit-transition: 0.31s cubic-bezier(.28,.01,.61,.98);
position: absolute;
}
.animation-fade.ng-enter, .animation-fade.ng-leave.ng-leave-active {
opacity:0;
.animation-fade.ng-enter {
z-index: 99998;
}
.animation-fade.ng-leave, .animation-fade.ng-enter.ng-enter-active {
opacity:1;
.animation-fade.ng-leave {
z-index: 99999;
-webkit-animation: 0.6s animation-fade-enter ease-out;
}
@-webkit-keyframes animation-fade-enter {
from {
opacity:1;
}
to {
opacity:0;
}
}
/* animation-push stuff */
.animation-push.ng-enter {
-webkit-animation: 0.31s animation-push-enter cubic-bezier(.28,.01,.61,.98);
@ -77,4 +84,12 @@
-webkit-transform: translateX(300px);
opacity:0;
}
}
/* some custom animated per page stuff */
.animation-fade.ng-leave .splash-top .logo {
-webkit-transition: .2s ease-out;
-webkit-transform: translateY(-30px);
}