Question

<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）

Answer 1

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

animation-fill-mode属性指定元素的样式   动画未播放时（完成动画或动画完成时）   延迟）。

默认情况下，CSS动画在第一个元素之前不会影响该元素   关键帧是“播放”，然后在最后一个关键帧出现后停止   完成。 animation-fill-mode属性可以覆盖它   行为。

- 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>

Answer 2

现在它会停留在最后一帧。我已将-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/

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

2 个答案: