Beispiel 3

Bitte einmal mit der Maus über diese Box fahren.

.ease

.ease-in

.ease-out

.ease-in-out

.linear

Hier der zugehörige CSS-Code:

.box {
	background: #dddddd;
	font-size: 100%;
	border: 1px solid #000000;
	width: 500px;
	padding: 5px 5px 0;
	color: #000000;
}


.box div {
	width: 100px;
	background: #aaaaaa;
	border: 1px solid #000000;
	margin: 5px 0;
	padding: 5px;
	text-align: center;
	position: relative;
	left: 0px;
}

.box:hover div {
	left: 388px;
}

.ease {
	transition: left 2s ease;
}

.ease-in {
	transition: left 2s ease-in;
}

.ease-out {
	transition: left 2s ease-out;
}

.ease-in-out {
	transition: left 2s ease-in-out;
}

.linear {
	transition: left 2s linear;
}