CSS动画对象并保留其新位置

<html> 
    <head> 
     <title>Animation</title> 

     <style type="text/css"> 
      .container 
       { 
        background-color: blue; 
        height: 200px; 
        width: 200px; 
        position: relative; 
        -webkit-animation-name:animate; 
        -webkit-animation-duration:1s; 
       } 

       @-webkit-keyframes animate 
       { 
        0% 
        { 
        -webkit-transform: translate(0, 0); 
        } 

        100% 
        { 
        -webkit-transform: translate(100px, 100px); 
        } 
       } 
     </style> 
    </head> 

    <body> 

    <div class="container"> 
    </div> 

    </body> 
</html>

上述代码动画一个对象，但在动画之后它返回到原始位置。如何将它保留在新的位置？这意味着广场不得返回到（0,0）CSS动画对象并保留其新位置

来源

2015-05-25 ThunderPunch

它会为你工作使用的过渡，而不是动画？ –

可以使用animation-fill-mode属性。

动画填充模式属性指定元素样式当动画是不是在玩（当它结束时，或者当它具有延迟）。

默认情况下，CSS动画不会影响元素，直到第一个关键帧被“播放”，然后一旦最后一个关键帧完成就停止。动画填充模式属性可以覆盖此行为行为。

- CSS3 animation-fill-mode Property

-webkit-animation-fill-mode: forwards做动作永久性的，一旦动画已经走完。

.container { 
 
    background-color: blue; 
 
    height: 200px; 
 
    width: 200px; 
 
    position: relative; 
 
    -webkit-animation-name: animate; 
 
    -webkit-animation-duration: 1s; 
 
    -webkit-animation-fill-mode: forwards; 
 
} 
 
@-webkit-keyframes animate { 
 
    0% { 
 
    -webkit-transform: translate(0, 0); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate(100px, 100px); 
 
    } 
 
}

<div class="container"> 
 
</div>

来源

2015-05-25 11:51:37

感谢Ashesh，BaTmaN的代码很好，但它取决于我使用的属性的值。 – ThunderPunch

是的，这将工作，但需要更多的工作（和LOC）。 –

现在它将停留在最后一帧。我已将-webkit-transform: translate(100px,100px);添加到容器类。

   .container 
      { 
       background-color: blue; 
       height: 200px; 
       width: 200px; 
       position: relative; 
       -webkit-animation-name:animate; 
       -webkit-animation-duration:1s; 
       -webkit-animation-iteration-count: 1; 
       -webkit-transform: translate(100px,100px); 
      } 

      @-webkit-keyframes animate 
      { 
       0% 
       { 
       -webkit-transform: translate(0, 0); 
       } 

       100% 
       { 
       -webkit-transform: translate(100px, 100px); 
       } 


      }

http://jsbin.com/nimuniviqa/2/

来源

2015-05-25 11:48:24 Prime

是的，它的工作。动画之后，它将它翻译为（100,100）。尽管简单的技巧：P感谢 – ThunderPunch

CSS动画对象并保留其新位置

回答

相关问题