elemental/less/base/animation.less

React UI Framework

// 
// Animations
// ==============================




// Modal
// --------------------

// dialog

@-webkit-keyframes modalDialogEnter {
	from { opacity: 0; -webkit-transform: scale( .96 ); }
	to { opacity: 1; -webkit-transform: scale( 1 ); }
}
@keyframes modalDialogEnter {
	from { opacity: 0; transform: scale( .96 ); }
	to { opacity: 1; transform: scale( 1 ); }
}

@-webkit-keyframes modalDialogLeave {
	from { opacity: 1; -webkit-transform: scale( 1 ); }
	to { opacity: 0; -webkit-transform: scale( .8 ); }
}
@keyframes modalDialogLeave {
	from { opacity: 1; transform: scale( 1 ); }
	to { opacity: 0; transform: scale( .8 ); }
}


// backdrop

@-webkit-keyframes modalBackdropEnter {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes modalBackdropEnter {
	from { opacity: 0; }
	to { opacity: 1; }
}

@-webkit-keyframes modalBackdropLeave {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes modalBackdropLeave {
	from { opacity: 1; }
	to { opacity: 0; }
}




// Dropdown
// --------------------

@-webkit-keyframes dropdownMenuEnter {
	from { opacity: 0; -webkit-transform: translate3d(0, -10%, 0); }
	to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes dropdownMenuEnter {
	from { opacity: 0; transform: translate3d(0, -10%, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes dropdownMenuLeave {
	from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
	to   { opacity: 0; -webkit-transform: translate3d(0, -10%, 0); }
}
@keyframes dropdownMenuLeave {
	from { opacity: 1; transform: translate3d(0, 0, 0); }
	to   { opacity: 0; transform: translate3d(0, -10%, 0); }
}




// Popout
// --------------------

@-webkit-keyframes popoutEnter {
	from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes popoutEnter {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes popoutLeave {
	from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
	to   { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); }
}
@keyframes popoutLeave {
	from { opacity: 1; transform: translate3d(0, 0, 0); }
	to   { opacity: 0; transform: translate3d(0, 20px, 0); }
}




// Fade
// ------------------------------

// fade in

@-webkit-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

// fade out

@-webkit-keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}




// Slide
// ------------------------------


// slide up

@-webkit-keyframes slideUp {
	from { -webkit-transform: translate3d(0, 100%, 0); }
	to { -webkit-transform: none; }
}
@keyframes slideUp {
	from { transform: translate3d(0, 100%, 0); }
	to { transform: none; }
}

// slide down

@-webkit-keyframes slideDown {
	from { -webkit-transform: translate3d(0, -100%, 0); }
	to { -webkit-transform: none; }
}
@keyframes slideUp {
	from { transform: translate3d(0, -100%, 0); }
	to { transform: none; }
}


// slide in

@-webkit-keyframes slideInFromLeft {
	from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); }
	to   { opacity: 1; -webkit-transform: none; }
}
@keyframes slideInFromLeft {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}

@-webkit-keyframes slideInFromRight {
	from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); }
	to   { opacity: 1; -webkit-transform: none; }
}
@keyframes slideInFromRight {
	from { opacity: 0; transform: translate3d(100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}


// slide out

@-webkit-keyframes slideOutToLeft {
	from { opacity: 1; -webkit-transform: none; }
	to   { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); }
}
@keyframes slideOutToLeft {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translate3d(-100%, 0, 0); }
}

@-webkit-keyframes slideOutToRight {
	from { opacity: 1; -webkit-transform: none; }
	to   { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); }
}
@keyframes slideOutToRight {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translate3d(100%, 0, 0); }
}




// Misc.
// ------------------------------

// spin

@-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	to { transform: rotate(360deg); }
}

// pulse

@-webkit-keyframes pulse {
	0%, 80%, 100% { opacity: 0; }
	40% { opacity: 1; }
}
@keyframes pulse {
	0%, 80%, 100% { opacity: 0; }
	40% { opacity: 1; }
}