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

// Views
// ------------------------------

// still

@-webkit-keyframes artificial {
	from { opacity: .99; }
	to { opacity: 1; }
}
@keyframes artificial {
	from { opacity: .99; }
	to { opacity: 1; }
}

// SHOW
// ====

// From Left

@-webkit-keyframes viewShowFromLeftEnter {
	from { -webkit-transform: translate3d(-100%, 0, 0); }
	to   { -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes viewShowFromLeftEnter {
	from { transform: translate3d(-100%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes viewShowFromLeftLeave {
	to   { opacity: .75; -webkit-transform: translate3d(25%, 0, 0); }
}
@keyframes viewShowFromLeftLeave {
	to   { opacity: .75; transform: translate3d(25%, 0, 0); }
}

// From right

@-webkit-keyframes viewShowFromRightEnter {
	from { -webkit-transform: translate3d(100%, 0, 0); }
	to   { -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes viewShowFromRightEnter          {
	from { transform: translate3d(100%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes viewShowFromRightLeave {
	to   { opacity: .75; -webkit-transform: translate3d(-25%, 0, 0); }
}
@keyframes viewShowFromRightLeave {
	to   { opacity: .75; transform: translate3d(-25%, 0, 0); }
}

// From top

@-webkit-keyframes viewShowFromTopEnter {
	from { -webkit-transform: translate3d(0, -100%, 0); }
	to   { -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes viewShowFromTopEnter {
	from { transform: translate3d(0, -100%, 0); }
	to   { transform: translate3d(0, 0, 0); }
}
// From bottom

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

// REVEAL
// ======

// From left

@-webkit-keyframes viewRevealFromLeftLeave   {
	from   { -webkit-transform: translate3d(0, 0, 0); }
	to { -webkit-transform: translate3d(-100%, 0, 0); }
}
@keyframes viewRevealFromLeftLeave           {
	from   { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-100%, 0, 0); }
}
@-webkit-keyframes viewRevealFromLeftEnter {
	from   { opacity: .75; -webkit-transform: translate3d(25%, 0, 0); }
	to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes viewRevealFromLeftEnter {
	from   { opacity: .75; transform: translate3d(25%, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

// From right

@-webkit-keyframes viewRevealFromRightLeave  {
	from   { -webkit-transform: translate3d(0, 0, 0); }
	to { -webkit-transform: translate3d(100%, 0, 0); }
}
@keyframes viewRevealFromRightLeave          {
	from   { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(100%, 0, 0); }
}
@-webkit-keyframes viewRevealFromRightEnter {
	from   { opacity: .75; -webkit-transform: translate3d(-25%, 0, 0); }
	to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes viewRevealFromRightEnter {
	from   { opacity: .75; transform: translate3d(-25%, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

// From top

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

// From bottom

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

// Common
// ------------------------------

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

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