Full explanation you can see here, as much as I understand, for Chrome, Safari, Opera and FireFox syntax is:

-webkit-transition

for Internet Explorer syntax is:

transition

I will show example just for Chrome.

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>

    <div id="parentDiv">
        I belong to the parent
    </div>

</body>
</html>

CSS:

#parentDiv {
    border-style: solid;
    border-width: 5px;
    height: 100px;
    width: 100px;
    -webkit-transition: height 15s;
}

#parentDiv:hover {
    height: 8000px;
}

Notice line:

-webkit-transition: height 15s;

here we said that we want to see transition for height, and line:

#parentDiv:hover

Here we are changing height when we come with mouse over.

Example:

I belong to the parent

---

Event which we can use is "webkitTransitionEnd".
For example, HTML:
<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="index.css">
		
		<script type="text/javascript" src="jquery-2.1.3.js"></script>
		<script type="text/javascript" src="index.js"></script>
	</head>
	
	<body>
	
		<div id="main">

			<div id="maxHeightDiv">
				Main div with max height
				<div id="nestedDiv">
					Div which is going to move
				</div>		
			</div>

		</div>
		
	</body>

</html>
CSS:
div {
	overflow-y: auto;
}
#maxHeightDiv {
	
	min-height: 100px;
	max-height: 100px;	
	width: 100px;
	overflow-y: auto;
	padding: 60px 0 0 0;
}

#nestedDiv {
overflow-y: auto;
	border: 2px solid #a1a1a1;
	height: 40px;

	-webkit-transition: height 2s;
}

#nestedDiv:hover{
	height: 100px;

	-webkit-transition: height 2s;
}

#maxHeightDiv::-webkit-scrollbar {
	display: none;
}
JS:
function myScroll() {
	$('#maxHeightDiv').scrollTop(10000);
}

window.onload = function () {
	$("#nestedDiv").on("webkitTransitionEnd", function () {
		myScroll();
	});
}
Hover with mouse over "Div which is going to move", and wait a little bit. Real life example:
Main div with max height
Div which is going to move

As you can see scroll will happen only when transition is over.

One example of animation in CSS3 (taken from here):

div {
	content:url("myImage.png");
	-webkit-animation: myfirst 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from{
		opacity: 0;
		-webkit-transform: rotate(0deg);
	} 
	to{
		opacity: 1;
		-webkit-transform: rotate(90deg);
	}
}

Example you can download here.

---

To know if animation has ended you can use this code:

window.onload = function () {
	document.getElementById("myDiv").addEventListener("webkitAnimationEnd", AnimationListener, false);
}

function AnimationListener() {
	alert("Animation has ended")
} 

Notice webkitAnimationEnd, this will most problably work just in Chrome, for other browser you should some of these events: oanimationend msAnimationEnd animationend
or simply use jQuery like:

window.onload = function () {
	$("div").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", 
		function(e) {
			alert("Animation has ended");
		})
}

---

To restart your animation you can use code like this:

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/jquery-2.1.1.js"></script>
		<script type="text/javascript" src="/index.js"></script>
		<link href="/index.css" rel="stylesheet" type="text/css"></link>
	</head>

	<body>
		<div class="myCssClas"></div>
		<button style="top:400px;position:absolute">Restart</button>
	</body>

</html>

JS:

window.onload = function () {
	$("button").click (function() {
		var el = $("div"),  
		newone = el.clone(true);
           
		el.before(newone);
        
		$("." + el.attr("class") + ":last").remove();
	});
}

CSS:

div {
	content:url("myImage.png");
	-webkit-animation: myfirst 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from{
		opacity: 0;
		-webkit-transform: rotate(0deg);
	} 
	to{
		opacity: 1;
		-webkit-transform: rotate(90deg);
	}
}

---

To force animation to stay on last position, use:

 -webkit-animation-fill-mode: forwards;

---

One more example of animation using pure JS - no jQuery or any other framework.

HTML:

<!DOCTYPE html>
	<html>
	
		<head>
			<link type="text/javascript" rel="stylesheet" href="/index.css">
			<script type="text/javascript" src="/index.js"></script>
		</head>

		<body>
			<div id="animationOne">Animation one</div>
			<div id="animationTwo" class="withoutAnimationTwo">Animation two</div>
			<button id="animationTwoStart">Animation two - start</button>
		</body>

	</html>

CSS:

#animationOne {
	position: relative;
	left: 0px;
	top: 0px;
	color: red;
	-webkit-animation: animationOne 1s;
	-webkit-animation-fill-mode: forwards;
}

.withoutAnimationTwo {
	position: relative;
	color: green;
	left: 0px;
	top: 0px;
}

.animationTwo {
	position: relative;
	color: green;
	left: 0px;
	top: 0px;
	-webkit-animation: animationTwo 1s; 
}

@-webkit-keyframes animationOne {
	from {
		left: 0px;
	}
	to {
		left: 1000px;
	}
}

@-webkit-keyframes animationTwo {
	from {
		left: 0px;
	}
	to {
		left: 1000px;
	}
}

JS:

window.onload=function () {
	document.getElementById("animationTwoStart").addEventListener("click", function () {
		document.getElementById("animationTwo").className = 'withoutAnimationTwo'; 
		
		//this set time out I need to restart the animation
		setTimeout(function() {
			document.getElementById("animationTwo").className = "animationTwo";
		}, 10);
	});
}

Example download from here.

If you try, in Google Chrome under Windows 8, to execute following statement:

if ("ontouchstart" in document.documentElement) {
  console.log("You can touch me")
} else {
  console.log("Cant touch this")
}

or as jsLint recommends:

if (document.documentElement.ontouchstart !== undefined) {
  console.log("You can touch me")
} else {
  console.log("Cant touch this")
}

(document.documentElement.ontouchstart is null if it exists, that is why we have to compare it with undefined, just don't use hasOwnProperty because it seems that it doesn't work on Android devices)

return value will be true, in Windows 7 return value is false

Few more things which you can test:

iOS (iphone/ipad) console:

typeof window.Touch
"object"

Windows 8 VM, Chrome Stable console:

typeof window.Touch
"function"

OSX, Chrome Stable, Safari latest, console:

typeof window.Touch
"undefined"

Taken from here.

In order to disable touch events on google chrome go to:

chrome://flags/

search for:

Enable touch events Mac, Windows, Linux, Chrome OS

Choose disable.