lionhylra/animation.css

## animation.css
/*basic*/
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

/*advance*/
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
/*shorthand*/
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

## example.html
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

## transform.css
/*parameter:x-axis,y-axis*/
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
/*parameter:x-axis,y-axis*/
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}
/*parameter:x-axis,y-axis*/
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

## transition.css
/*multiple changes*/
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari */
}
/*advanced*/
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;/*linear,ease,ease-in,ease-out,ease-in-out*/
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

/* shorthand */
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
	/basic/
	@keyframes myfirst
	{
	from {background: red;}
	to {background: yellow;}
	}

	@-webkit-keyframes myfirst /* Safari and Chrome */
	{
	from {background: red;}
	to {background: yellow;}
	}

	div
	{
	animation: myfirst 5s;
	-webkit-animation: myfirst 5s; /* Safari and Chrome */
	}

	/advance/
	@keyframes myfirst
	{
	0% {background: red; left:0px; top:0px;}
	25% {background: yellow; left:200px; top:0px;}
	50% {background: blue; left:200px; top:200px;}
	75% {background: green; left:0px; top:200px;}
	100% {background: red; left:0px; top:0px;}
	}

	@-webkit-keyframes myfirst /* Safari and Chrome */
	{
	0% {background: red; left:0px; top:0px;}
	25% {background: yellow; left:200px; top:0px;}
	50% {background: blue; left:200px; top:200px;}
	75% {background: green; left:0px; top:200px;}
	100% {background: red; left:0px; top:0px;}
	}

	div
	{
	animation-name: myfirst;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
	/* Safari and Chrome: */
	-webkit-animation-name: myfirst;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
	}
	/shorthand/
	div
	{
	animation: myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation: myfirst 5s linear 2s infinite alternate;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	div
	{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
	}

	div:hover
	{
	width:300px;
	}
	</style>
	</head>
	<body>

	<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

	<div></div>

	<p>Hover over the div element above, to see the transition effect.</p>

	</body>
	</html>
	/parameter:x-axis,y-axis/
	div
	{
	transform: translate(50px,100px);
	-ms-transform: translate(50px,100px); /* IE 9 */
	-webkit-transform: translate(50px,100px); /* Safari and Chrome */
	}

	div
	{
	transform: rotate(30deg);
	-ms-transform: rotate(30deg); /* IE 9 */
	-webkit-transform: rotate(30deg); /* Safari and Chrome */
	}
	/parameter:x-axis,y-axis/
	div
	{
	transform: scale(2,4);
	-ms-transform: scale(2,4); /* IE 9 */
	-webkit-transform: scale(2,4); /* Safari and Chrome */
	}
	/parameter:x-axis,y-axis/
	div
	{
	transform: skew(30deg,20deg);
	-ms-transform: skew(30deg,20deg); /* IE 9 */
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
	}
	/multiple changes/
	div
	{
	transition: width 2s, height 2s, transform 2s;
	-webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari */
	}
	/advanced/
	div
	{
	transition-property: width;
	transition-duration: 1s;
	transition-timing-function: linear;/linear,ease,ease-in,ease-out,ease-in-out/
	transition-delay: 2s;
	/* Safari */
	-webkit-transition-property:width;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
	}

	/* shorthand */
	div
	{
	transition: width 1s linear 2s;
	/* Safari */
	-webkit-transition:width 1s linear 2s;
	}