/*CSS TRANSITION BELOW

to set up a css transition, make a transition list (based on a change in hover state). but could be a change instigated by a user event
maybe a.selected (once something is selected we attach javascript to the object so once it's clicked it does something).

a:hover -- is a pseudo class that gets defined automatically when the mouse is over the anchor tag. 
if we were to use a.selected we would have to define the class and go in with javascript to explain what happens.
*/

a {
	display: inline-block;
	background-color:#333;
	color: #ccc;
	padding: 10px;
	text-decoration: none;
	border-radius: 5px;
	box-shadow: 0 0 1px rgba(0,0,0,0);
	transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
	}

a:hover {
	color: #fff;
	background-color: purple;
	box-shadow: 0 3px 10px rgba(0,0,0,0.3);


}

body {font-family: Arial, Sans-Serif;}
h1, h2, h3, h4 {font-weight: normal; font-size: 48px;}

/*CSS ANIMATION 
use the webkit prefix (and the mozilla etc.) in order for all browsers to have this work
you need the prefixed version for the browser within the h1 for example, but also within the definitions
(in the @keyframes area) keyframes makes it animate when the page loads, you can modify thenimation

key frames -- point you want the animation to exist at a place in time
*/

h1 {
	-webkit-animation-duration: 1s;
	animation-duration: 1s; /*will animate over one second */
	animation-name: fadeIn; /*the type of animation we're using, we gave it a name */
	animation-iteration-count: 3;
	-webkit-animation-iteration-count: 3;

}

@-webkit-keyframes fadeIn {
	0%{
		opacity: 0;
		margin-left:100px;
	}
	50%{
		opacity: 1;
		margin-left: 100px;

	}
	100%{
		opacity: 1;
		margin-left: 0px;
	}
}

@keyframes fadeIn {
	0%{
		opacity: 0;
		margin-left:100px;
	}
	50%{
		opacity: 1;
		margin-left: 100px;

	}
	100%{
		opacity: 1;
		margin-left: 0px;
	}
}

/*
JQUERY ANIMATIONS 
1. make the jquery library available on the page (go to jquery.com and grab <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> and put in the body tag
	go to jQuery page*/