markberning
12/18/2017 - 12:42 AM

CSS Transitions

/*TRANSITIONS

TRANSITIONS
-List the properties to transition
-Define how long the transition should take 
-Set an optional delay and change in speed
-Usuall triggered by a users actions OR a change in state (mouse click, hover, or JS can trigger a transition)

Transitions need
-start value
-end value

Simple way to add transitions is using a pseudo class

CSS TRANSITION PROPERTIES
transition-property (select which property gets transitioned, default = all, all = browser intensive if there are a lot of properties set for your element, so set property specifically instead of using 'all')
transition-duration
transition-timing-function
transition-delay (req, default = 0sec)

ONLY animatable properties can be animated
https://www.w3.org/TR/css-transitions-1/#animatable-properties

Animatable Showcase:
http://leaverou.github.io/animatable/#
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Opacity Transition Example:
/* =================================
  Photo Overlay Transitions
==================================== */
.photo-overlay {
	opacity: 1;
	transition-duration: 0.5s;
}
.photo-overlay:hover {
	opacity: 0;
}

/*----------------------
Shorthand*/
transition: opacity .3s ease-out .2s, background .4s ease-out .3s , box-shadow .5s ease-out .2s;
/*property duration timing-function delay, property duration timing-function delay, property duration timing-function delay*/