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

时间:2014-04-20 15:45:42

标签: html css animation

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

2 个答案:

答案 0 :(得分: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);
    }
}

答案 1 :(得分:0)

它不是以前开始的,它只是看起来像因为缓和属性。两种动画同时开始和停止,它们看起来不同。尝试在两者上使用linear缓动。

-webkit-animation: mysecond 1s linear;