touchstonejs-ui/less/core/animations.less

React.js UI components for the TouchstoneJS platform http://touchstonejs.io

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




// 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; }
}


// fade out-expand

@-webkit-keyframes fadeExpand {
	to { opacity: 0; -webkit-transform: scale(1.5); }
}
@keyframes fadeExpand {
	to { opacity: 0; transform: scale(1.5); }
}


// fade out-contract

@-webkit-keyframes fadeContract {
	to { opacity: 0; -webkit-transform: scale(.35); }
}
@keyframes fadeContract {
	to { opacity: 0; transform: scale(.35); }
}




// 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 slideDown {
	from {transform: translate3d(0, -100%, 0); }
	to { transform: none; }
}




// Misc
// ------------------------------


// spin

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


// pulse

@-webkit-keyframes pulse {
	50% { opacity: .25; }
}
@keyframes pulse {
	50% { opacity: .25; }
}