Files
ionic-framework/scss/ionic/_animations.scss
2013-11-01 18:33:13 -05:00

64 lines
1.3 KiB
SCSS

$bezier-function: cubic-bezier(.1, .7, .1, 1);
.slide-in-up {
// Start hidden
opacity: 0;
// Start it down low
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
transition: -webkit-transform 0.4s, opacity 0.1s;
-webkit-transition-timing-function: $bezier-function;
transition-timing-function: $bezier-function;
-webkit-animation-fill-mode: forwards;
}
.slide-in-up.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
-webkit-animation: fadeOut 0.3s;
animation: fadeOut 0.3s;
&.active {
-webkit-animation: fadeIn 0.3s;
animation: fadeIn 0.3s;
}
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}