One quick example without too much explanation.

HTML:

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

CSS:

#parent {
    margin: 0px auto 0px auto;
    width: 250px;
    overflow: hidden;
}

#container {
    position: relative;
    -webkit-animation-name: container;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
}

@-webkit-keyframes container {
    0% {
        -webkit-transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(800px);
    }
}

Live example (Chrome only):

 

test
Example taken from here, my example I created only for Chrome.

HTML:

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

CSS:

@-webkit-keyframes fadeIn {
    from {
        opacity:0;
    } to {
        opacity:1;
    }
}

#clickMe {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    -webkit-animation-duration:1s;

    -webkit-animation-delay: 0.7s;
}
Example:
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.