html - 为什么一个 Div 的动画速度比另一个快

Question

使用关键帧动画，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/

Answer 1

Demo

@-webkit-keyframes 两者不同

根据要求

New Demo

@-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);
    }
}