使用关键帧动画,id为“Second”的div在“first”div开始之前稍微动画。这是我的代码不应该默认以相同的速度移动吗?任何帮助都会非常感谢。
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
和HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
jsfiddle上的代码:http://jsfiddle.net/x3p64/
答案 0 :(得分:1)
的 Demo
@-webkit-keyframes
对于两者都不同
根据要求
@-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
@-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
答案 1 :(得分:0)
它不是以前开始的,它只是看起来像因为缓和属性。两种动画同时开始和停止,它们看起来不同。尝试在两者上使用linear
缓动。
-webkit-animation: mysecond 1s linear;