.box3 {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box3:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}						
.parent {
	width: 250px;
	height: 125px;
}
.box	{
	width: 7px;
	line-height: 7px;
	background-color: #dfdfdf;
	font-size: 0px;
	left: 100px;
	top: 550px;
	position: absolute;
	-webkit-transition-property: width height background-color font-size left top color;	/*	einige Browser benötigen -webkit- */
	-webkit-transition-duration: 1s;
	-webkit-transition-delay: 4s;
	-webkit-transition-timing-function: linear;
	transition-property: width height background-color font-size left top color;
	transition-duration: 1s;
	transition-delay: 4s;
	transition-timing-function: linear;
}

.box1	{
	width: 250px;
	line-height: 26px;
	background-color: purple;
	color: yellow;
	font-size: 16px;
	left: 115px;
	top:400px;
	position: absolute;
	-webkit-transition-property: width height background-color font-size left top color;
	-webkit-transition-duration: 1s;
	-webkit-transition-delay: 0s;
	-webkit-transition-timing-function: linear;
	transition-property: width height background-color font-size left top color;
	transition-duration: 1s;
	transition-delay: 0s;
	transition-timing-function: linear;
}