From 1e95015070867a7d2bb80c4c38a5df461ade20ed Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 27 Nov 2013 22:50:33 -0600 Subject: [PATCH] separated keyframes from animations --- dist/css/ionic.css | 324 +++++++++++++++++++++++------------------- scss/_animations.scss | 108 ++------------ scss/_keyframes.scss | 121 ++++++++++++++++ scss/ionic.scss | 1 + 4 files changed, 312 insertions(+), 242 deletions(-) create mode 100644 scss/_keyframes.scss diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 2b42b6fc4a..8f7254e573 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -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 */ diff --git a/scss/_animations.scss b/scss/_animations.scss index 057960fea4..c51daf1625 100644 --- a/scss/_animations.scss +++ b/scss/_animations.scss @@ -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 diff --git a/scss/_keyframes.scss b/scss/_keyframes.scss new file mode 100644 index 0000000000..79692d4e8c --- /dev/null +++ b/scss/_keyframes.scss @@ -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); } +} diff --git a/scss/ionic.scss b/scss/ionic.scss index d562d48c3a..888f96ebd4 100644 --- a/scss/ionic.scss +++ b/scss/ionic.scss @@ -53,6 +53,7 @@ "button-bar", // Util + "keyframes", "animations", "grid", "util",