javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

separated keyframes from animations

Browse Source
This commit is contained in:
Adam Bradley
2013-11-27 22:50:33 -06:00
parent ab49c9ea74
commit 1e95015070
4 changed files with 312 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
scss/_keyframes.scss Normal file
View 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); }
}