Live Demo: Example of CSS3 order Property Animation

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 order Property Animation</title>
<style>
.flex-container {
	width: 300px;
	height: 200px;
	font-size: 32px;
	border: 1px solid black;
	display: -webkit-flex; /* Safari */		
	display: flex; /* Standard syntax */
}
.flex-container div {
	width: 100px;
}
.item1 {
	background: #e84d51;
	-webkit-order: 1;
	order: 1;
}
.item2 {
	background: #7ed636;
	-webkit-order: 2;
	order: 2;
}
.item3 {
	background: #2f97ff;
	-webkit-order: 3;
	order: 3;
}
.animated {
    -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
    animation: test 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    50% {-webkit-order: 5;}
}
/* Standard syntax */
@keyframes test {
    50% {order: 5;}
}
</style>
</head>
<body>
	<p><strong>Warning:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions. Google Chrome does not support the animation on the order property.</p>
	<p><strong>Note:</strong> The order of the flex item1 inside the following flex container is animating from its initial value "1" to "5", and back to the initial value "1" again up to infinite times.<p>
	<div class="flex-container">
        <div class="item1 animated">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>
</html>