/*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*/