Question

CSS3的transition属性的动画

#div6{
background-color:#CC9966;
height:155px;
width:155px;
-webkit-transition:rotateY 2s ease 3s,background-color 2s ease
}
#div6:hover{
-webkit-transform:rotateY(55deg);
background-color:#FF0033
}
=========================想让它先做rotateY的动画2秒完成，然后间隔3秒，再做背景颜色的动画，但这个却反应，错在哪了。

Answer 1

#div6{
	background-color:#CC9966;
	height:155px;
	width:155px;
	-webkit-transition:transform 2s ease 0s,background-color 2s ease 3s
}
#div6:hover{
	-webkit-transform:rotateY(55deg);
	background-color:#FF0033
}

这样看下

Answer 2

#div61{
background-color:#CC9966;
height:155px;
width:155px;
animation:dong 7s ease-in-out 0s 1 normal;
-moz-animation:dong 7s ease-in-out 0s 1 normal;
-webkit-animation:dong 7s ease-in-out 0s 1 normal;
-o-animation:dong 7s ease-in-out 0s 1 normal;
}
@keyframes dong{
0%{
transform:rotateX(0deg);
}
30%{
transform:rotateX(120deg);
}
70%{
background-color:#CC9966;
transform:rotateX(120deg);
}
100%{
background-color:red;
transform:rotateX(120deg);
}
}
你用火狐 或则 360 看下