mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
122 lines
2.5 KiB
SCSS
122 lines
2.5 KiB
SCSS
|
|
/**
|
|
* 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); }
|
|
}
|