Only for Chrome.

In my case I want to have image, and some text (in future that will be menu) which will swipe inside the image.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/index.css">
	</head>
	
	<body>
		<div id="images">
			<img id="myImage" src="/lopata.jpg"></img>
			<div id="myCssSwipe" class="myTranslateY">
				I will swipe
			</div>
		</div>
		
		<script type="text/javascript" src="/index.js"></script>
		
	</body>
	
</html>

JS:

document.getElementById("myImage").addEventListener("click", function() {
	if (document.getElementById("myCssSwipe").className !== "myTranslateY-clicked") {
		document.getElementById("myCssSwipe").className = "myTranslateY-clicked";
	} else {
		document.getElementById("myCssSwipe").className = "myTranslateY";
	}
})

CSS:

#images {
	position:relative;
	overflow: hidden;
	margin-top:100px
}

.myTranslateY {
	color: red;
	position:absolute;
    top:15%;

	-webkit-transition: all 5000ms ease;
	-webkit-transform: translateY(0px);
}

.myTranslateY-clicked {
	color: red;
	position:absolute;
    top:15%;

	-webkit-transform: translateY(-200px);
	-webkit-transition: all 5000ms ease;	
}
Here notice line:
margin-top:100px
which has no practical puropse, I just wanted to separate image from rest of HTML
Then notice:
overflow: hidden; Which I need for text to "disappear" when it comes to the end of the image.

Example (only in Chrome):

I will swipe

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.

Since I like web scrapping, my latest project you can see here, always I need to find a path to a specific node. Chrome make it easy: