mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
separated keyframes from animations
This commit is contained in:
Adam Bradley
324
dist/css/ionic.css
vendored
324
dist/css/ionic.css
vendored
@@ -4996,6 +4996,148 @@ a.button {
|
||||
border-right-width: 1px;
|
||||
border-radius: 0px 2px 2px 0px; }
|
||||
|
||||
/**
|
||||
* Keyframes
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes slideInFromLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0); }
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0); } }
|
||||
|
||||
@-moz-keyframes slideInFromLeft {
|
||||
from {
|
||||
-moz-transform: translateX(-100%); }
|
||||
|
||||
to {
|
||||
-moz-transform: translateX(0); } }
|
||||
|
||||
@keyframes slideInFromLeft {
|
||||
from {
|
||||
transform: translateX(-100%); }
|
||||
|
||||
to {
|
||||
transform: translateX(0); } }
|
||||
|
||||
@-webkit-keyframes slideInFromRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0); }
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0); } }
|
||||
|
||||
@-moz-keyframes slideInFromRight {
|
||||
from {
|
||||
-moz-transform: translateX(100%); }
|
||||
|
||||
to {
|
||||
-moz-transform: translateX(0); } }
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%); }
|
||||
|
||||
to {
|
||||
transform: translateX(0); } }
|
||||
|
||||
@-webkit-keyframes slideOutToleft {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(-100%, 0, 0); } }
|
||||
|
||||
@-moz-keyframes slideOutToleft {
|
||||
from {
|
||||
-moz-transform: translateX(0); }
|
||||
|
||||
to {
|
||||
-moz-transform: translateX(-100%); } }
|
||||
|
||||
@keyframes slideOutToLeft {
|
||||
from {
|
||||
transform: translateX(0); }
|
||||
|
||||
to {
|
||||
transform: translateX(-100%); } }
|
||||
|
||||
@-webkit-keyframes slideOutToRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(100%, 0, 0); } }
|
||||
|
||||
@-moz-keyframes slideOutToRight {
|
||||
from {
|
||||
-moz-transform: translateX(0); }
|
||||
|
||||
to {
|
||||
-moz-transform: translateX(100%); } }
|
||||
|
||||
@keyframes slideOutToRight {
|
||||
from {
|
||||
transform: translateX(0); }
|
||||
|
||||
to {
|
||||
transform: translateX(100%); } }
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1; }
|
||||
|
||||
to {
|
||||
opacity: 0; } }
|
||||
|
||||
@-moz-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; } }
|
||||
|
||||
@-moz-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0; }
|
||||
|
||||
to {
|
||||
opacity: 1; } }
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0; }
|
||||
|
||||
to {
|
||||
opacity: 1; } }
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg); } }
|
||||
|
||||
@-moz-keyframes spin {
|
||||
100% {
|
||||
-moz-transform: rotate(360deg); } }
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
/**
|
||||
* Animations
|
||||
* --------------------------------------------------
|
||||
@@ -5114,58 +5256,14 @@ a.button {
|
||||
-moz-transform: translate3d(20%, 0, 0);
|
||||
transform: translate3d(20%, 0, 0); }
|
||||
|
||||
@-webkit-keyframes slideInLeft {
|
||||
0% {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-moz-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0); }
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0); } }
|
||||
|
||||
@-webkit-keyframes slideOutLeft {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0px, 0, 0);
|
||||
-moz-transform: translate3d(0px, 0, 0);
|
||||
transform: translate3d(0px, 0, 0); }
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-moz-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0); } }
|
||||
|
||||
@-webkit-keyframes slideInRight {
|
||||
0% {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-moz-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0); }
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0); } }
|
||||
|
||||
@-webkit-keyframes slideOutRight {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0); }
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-moz-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0); } }
|
||||
|
||||
.slide-in-left {
|
||||
-webkit-transform: translate3d(0%, 0, 0);
|
||||
-moz-transform: translate3d(0%, 0, 0);
|
||||
transform: translate3d(0%, 0, 0); }
|
||||
.slide-in-left.ng-enter, .slide-in-left > .ng-enter {
|
||||
-webkit-animation-name: slideInLeft;
|
||||
-moz-animation-name: slideInLeft;
|
||||
animation-name: slideInLeft;
|
||||
-webkit-animation-name: slideInFromLeft;
|
||||
-moz-animation-name: slideInFromLeft;
|
||||
animation-name: slideInFromLeft;
|
||||
-webkit-animation-duration: 250ms;
|
||||
-moz-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
@@ -5176,9 +5274,9 @@ a.button {
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.slide-in-left.ng-leave, .slide-in-left > .ng-leave {
|
||||
-webkit-animation-name: slideOutLeft;
|
||||
-moz-animation-name: slideOutLeft;
|
||||
animation-name: slideOutLeft;
|
||||
-webkit-animation-name: slideOutToLeft;
|
||||
-moz-animation-name: slideOutToLeft;
|
||||
animation-name: slideOutToLeft;
|
||||
-webkit-animation-duration: 250ms;
|
||||
-moz-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
@@ -5204,18 +5302,18 @@ a.button {
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.slide-in-left-add-active {
|
||||
-webkit-animation-name: slideInLeft;
|
||||
-moz-animation-name: slideInLeft;
|
||||
animation-name: slideInLeft; }
|
||||
-webkit-animation-name: slideInFromLeft;
|
||||
-moz-animation-name: slideInFromLeft;
|
||||
animation-name: slideInFromLeft; }
|
||||
|
||||
.slide-out-left {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-moz-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0); }
|
||||
.slide-out-left.ng-enter, .slide-out-left > .ng-enter {
|
||||
-webkit-animation-name: slideOutLeft;
|
||||
-moz-animation-name: slideOutLeft;
|
||||
animation-name: slideOutLeft;
|
||||
-webkit-animation-name: slideOutToLeft;
|
||||
-moz-animation-name: slideOutToLeft;
|
||||
animation-name: slideOutToLeft;
|
||||
-webkit-animation-duration: 250ms;
|
||||
-moz-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
@@ -5226,9 +5324,9 @@ a.button {
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.slide-out-left.ng-leave, .slide-out-left > .ng-leave {
|
||||
-webkit-animation-name: slideOutLeft;
|
||||
-moz-animation-name: slideOutLeft;
|
||||
animation-name: slideOutLeft;
|
||||
-webkit-animation-name: slideOutToLeft;
|
||||
-moz-animation-name: slideOutToLeft;
|
||||
animation-name: slideOutToLeft;
|
||||
-webkit-animation-duration: 250ms;
|
||||
-moz-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
@@ -5254,18 +5352,18 @@ a.button {
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.slide-out-left-add-active {
|
||||
-webkit-animation-name: slideOutLeft;
|
||||
-moz-animation-name: slideOutLeft;
|
||||
animation-name: slideOutLeft; }
|
||||
-webkit-animation-name: slideOutToLeft;
|
||||
-moz-animation-name: slideOutToLeft;
|
||||
animation-name: slideOutToLeft; }
|
||||
|
||||
.slide-in-right {
|
||||
-webkit-transform: translate3d(0%, 0, 0);
|
||||
-moz-transform: translate3d(0%, 0, 0);
|
||||
transform: translate3d(0%, 0, 0); }
|
||||
.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
|
||||
-webkit-animation-name: slideInRight;
|
||||
-moz-animation-name: slideInRight;
|
||||
animation-name: slideInRight;
|
||||
-webkit-animation-name: slideInFromRight;
|
||||
-moz-animation-name: slideInFromRight;
|
||||
animation-name: slideInFromRight;
|
||||
-webkit-animation-duration: 250ms;
|
||||
-moz-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
@@ -5276,9 +5374,9 @@ a.button {
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
|
||||
-webkit-animation-name: slideInRight;
|
||||
-moz-animation-name: slideInRight;
|
||||
animation-name: slideInRight;
|
||||
-webkit-animation-name: slideInFromRight;
|
||||
-moz-animation-name: slideInFromRight;
|
||||
animation-name: slideInFromRight;
|
||||
-webkit-animation-duration: 250ms;
|
||||
-moz-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
@@ -5304,18 +5402,18 @@ a.button {
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.slide-in-right-add-active {
|
||||
-webkit-animation-name: slideInRight;
|
||||
-moz-animation-name: slideInRight;
|
||||
animation-name: slideInRight; }
|
||||
-webkit-animation-name: slideInFromRight;
|
||||
-moz-animation-name: slideInFromRight;
|
||||
animation-name: slideInFromRight; }
|
||||
|
||||
.slide-out-right {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-moz-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0); }
|
||||
.slide-out-right.ng-enter, .slide-out-right > .ng-enter {
|
||||
-webkit-animation-name: slideOutRight;
|
||||
-moz-animation-name: slideOutRight;
|
||||
animation-name: slideOutRight;
|
||||
-webkit-animation-name: slideOutToRight;
|
||||
-moz-animation-name: slideOutToRight;
|
||||
animation-name: slideOutToRight;
|
||||
-webkit-animation-duration: 250ms;
|
||||
-moz-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
@@ -5326,9 +5424,9 @@ a.button {
|
||||
-moz-animation-fill-mode: both;
|
||||
animation-fill-mode: both; }
|
||||
.slide-out-right.ng-leave, .slide-out-right > .ng-leave {
|
||||
-webkit-animation-name: slideOutRight;
|
||||
-moz-animation-name: slideOutRight;
|
||||
animation-name: slideOutRight;
|
||||
-webkit-animation-name: slideOutToRight;
|
||||
-moz-animation-name: slideOutToRight;
|
||||
animation-name: slideOutToRight;
|
||||
-webkit-animation-duration: 250ms;
|
||||
-moz-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
@@ -5354,35 +5452,9 @@ a.button {
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.slide-out-right-add-active {
|
||||
-webkit-animation-name: slideOutRight;
|
||||
-moz-animation-name: slideOutRight;
|
||||
animation-name: slideOutRight; }
|
||||
|
||||
@-webkit-keyframes slideInUp {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-moz-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 0; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1; } }
|
||||
|
||||
@-webkit-keyframes slideOutUp {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-moz-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 0; } }
|
||||
-webkit-animation-name: slideOutToRight;
|
||||
-moz-animation-name: slideOutToRight;
|
||||
animation-name: slideOutToRight; }
|
||||
|
||||
.slide-in-up {
|
||||
-webkit-transform: translate3d(0, 0%, 0);
|
||||
@@ -5454,34 +5526,6 @@ a.button {
|
||||
-moz-animation-name: slideOutUp;
|
||||
animation-name: slideOutUp; }
|
||||
|
||||
@-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;
|
||||
-moz-animation: fadeOut 0.3s;
|
||||
@@ -5499,18 +5543,6 @@ a.button {
|
||||
.fade-in-not-out.ng-leave, .fade-in-not-out .ng-leave {
|
||||
display: none; }
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg); } }
|
||||
|
||||
@-moz-keyframes spin {
|
||||
100% {
|
||||
-moz-transform: rotate(360deg); } }
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
/**
|
||||
* Some component specific animations
|
||||
*/
|
||||
|
||||
@@ -119,50 +119,16 @@ $transition-time: 250ms;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes slideInLeft {
|
||||
0% {
|
||||
@include translate3d(100%, 0, 0);
|
||||
}
|
||||
100% {
|
||||
@include translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideOutLeft {
|
||||
0% {
|
||||
@include translate3d(0px,0,0);
|
||||
}
|
||||
100% {
|
||||
@include translate3d(-100%,0,0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideInRight {
|
||||
0% {
|
||||
@include translate3d(-100%,0,0);
|
||||
}
|
||||
100% {
|
||||
@include translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideOutRight {
|
||||
0% {
|
||||
@include translate3d(0,0,0);
|
||||
}
|
||||
100% {
|
||||
@include translate3d(100%,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-left {
|
||||
@include translate3d(0%,0,0);
|
||||
&.ng-enter, > .ng-enter {
|
||||
@include animation-name(slideInLeft);
|
||||
@include animation-name(slideInFromLeft);
|
||||
@include animation-duration($transition-time);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
&.ng-leave, > .ng-leave {
|
||||
@include animation-name(slideOutLeft);
|
||||
@include animation-name(slideOutToLeft);
|
||||
@include animation-duration($transition-time);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
@include animation-fill-mode(both);
|
||||
@@ -177,19 +143,19 @@ $transition-time: 250ms;
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
.slide-in-left-add-active {
|
||||
@include animation-name(slideInLeft);
|
||||
@include animation-name(slideInFromLeft);
|
||||
}
|
||||
|
||||
.slide-out-left {
|
||||
@include translate3d(-100%,0,0);
|
||||
&.ng-enter, > .ng-enter {
|
||||
@include animation-name(slideOutLeft);
|
||||
@include animation-name(slideOutToLeft);
|
||||
@include animation-duration($transition-time);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
&.ng-leave, > .ng-leave {
|
||||
@include animation-name(slideOutLeft);
|
||||
@include animation-name(slideOutToLeft);
|
||||
@include animation-duration($transition-time);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
@include animation-fill-mode(both);
|
||||
@@ -206,19 +172,19 @@ $transition-time: 250ms;
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
.slide-out-left-add-active {
|
||||
@include animation-name(slideOutLeft);
|
||||
@include animation-name(slideOutToLeft);
|
||||
}
|
||||
|
||||
.slide-in-right {
|
||||
@include translate3d(0%,0,0);
|
||||
&.ng-enter, > .ng-enter {
|
||||
@include animation-name(slideInRight);
|
||||
@include animation-name(slideInFromRight);
|
||||
@include animation-duration($transition-time);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
&.ng-leave, > .ng-leave {
|
||||
@include animation-name(slideInRight);
|
||||
@include animation-name(slideInFromRight);
|
||||
@include animation-duration($transition-time);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
@include animation-fill-mode(both);
|
||||
@@ -232,19 +198,19 @@ $transition-time: 250ms;
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
.slide-in-right-add-active {
|
||||
@include animation-name(slideInRight);
|
||||
@include animation-name(slideInFromRight);
|
||||
}
|
||||
|
||||
.slide-out-right {
|
||||
@include translate3d(100%,0,0);
|
||||
&.ng-enter, > .ng-enter {
|
||||
@include animation-name(slideOutRight);
|
||||
@include animation-name(slideOutToRight);
|
||||
@include animation-duration($transition-time);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
&.ng-leave, > .ng-leave {
|
||||
@include animation-name(slideOutRight);
|
||||
@include animation-name(slideOutToRight);
|
||||
@include animation-duration($transition-time);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
@include animation-fill-mode(both);
|
||||
@@ -260,29 +226,7 @@ $transition-time: 250ms;
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
.slide-out-right-add-active {
|
||||
@include animation-name(slideOutRight);
|
||||
}
|
||||
|
||||
$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
|
||||
@-webkit-keyframes slideInUp {
|
||||
0% {
|
||||
@include translate3d(0, 100%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
@include translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideOutUp {
|
||||
0% {
|
||||
@include translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
@include translate3d(0, 100%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
@include animation-name(slideOutToRight);
|
||||
}
|
||||
|
||||
.slide-in-up {
|
||||
@@ -334,24 +278,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
|
||||
@include animation-name(slideOutUp);
|
||||
}
|
||||
|
||||
@-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 {
|
||||
@include animation(fadeOut 0.3s);
|
||||
&.active {
|
||||
@@ -369,16 +295,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes spin {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Some component specific animations
|
||||
|
||||
121
scss/_keyframes.scss
Normal file
121
scss/_keyframes.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
|
||||
/**
|
||||
* Keyframes
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
// Slide In From Left
|
||||
// -------------------------------
|
||||
|
||||
@-webkit-keyframes slideInFromLeft {
|
||||
from { -webkit-transform: translate3d(-100%, 0, 0); }
|
||||
to { -webkit-transform: translate3d(0, 0, 0); }
|
||||
}
|
||||
@-moz-keyframes slideInFromLeft {
|
||||
from { -moz-transform: translateX(-100%); }
|
||||
to { -moz-transform: translateX(0); }
|
||||
}
|
||||
@keyframes slideInFromLeft {
|
||||
from { transform: translateX(-100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
|
||||
// Slide In From Right
|
||||
// -------------------------------
|
||||
|
||||
@-webkit-keyframes slideInFromRight {
|
||||
from { -webkit-transform: translate3d(100%, 0, 0); }
|
||||
to { -webkit-transform: translate3d(0, 0, 0); }
|
||||
}
|
||||
@-moz-keyframes slideInFromRight {
|
||||
from { -moz-transform: translateX(100%); }
|
||||
to { -moz-transform: translateX(0); }
|
||||
}
|
||||
@keyframes slideInFromRight {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
|
||||
// Slide Out To Left
|
||||
// -------------------------------
|
||||
|
||||
@-webkit-keyframes slideOutToleft {
|
||||
from { -webkit-transform: translate3d(0, 0, 0); }
|
||||
to { -webkit-transform: translate3d(-100%, 0, 0); }
|
||||
}
|
||||
@-moz-keyframes slideOutToleft {
|
||||
from { -moz-transform: translateX(0); }
|
||||
to { -moz-transform: translateX(-100%); }
|
||||
}
|
||||
@keyframes slideOutToLeft {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
|
||||
// Slide Out To Right
|
||||
// -------------------------------
|
||||
|
||||
@-webkit-keyframes slideOutToRight {
|
||||
from { -webkit-transform: translate3d(0, 0, 0); }
|
||||
to { -webkit-transform: translate3d(100%, 0, 0); }
|
||||
}
|
||||
@-moz-keyframes slideOutToRight {
|
||||
from { -moz-transform: translateX(0); }
|
||||
to { -moz-transform: translateX(100%); }
|
||||
}
|
||||
@keyframes slideOutToRight {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
|
||||
// Fade Out
|
||||
// -------------------------------
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-moz-keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
|
||||
// Fade In
|
||||
// -------------------------------
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
|
||||
// Spin
|
||||
// -------------------------------
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes spin {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@@ -53,6 +53,7 @@
|
||||
"button-bar",
|
||||
|
||||
// Util
|
||||
"keyframes",
|
||||
"animations",
|
||||
"grid",
|
||||
"util",
|
||||
|
||||
Reference in New Issue
Block a user