Question

我真的很困惑这个。我希望我的元素（月亮）从页面顶部向下看不可见，然后立即旋转一次。但是，不幸的是我无法做到。它下降，然后等待一两秒，旋转然后消失。但我希望它留在页面中。这是我的代码：

.moon {
    -webkit-transform: translateY(-700px);
    -moz-transform: translateY(-700px);
    -ms-transform: translateY(-700px);
    -o-transform: translateY(-700px);
    transform: translateY(-700px);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: moon 4s cubic-bezier(.49,.05,.32,1.04) 1s 1 ;
    animation: moon 4s cubic-bezier(.49,.05,.32,1.04) 1s 1 ;

}

@-webkit-keyframes moon {
    45%   {
        -webkit-transform: translateY(0px);
    }

    75%   {
        -webkit-transform: rotate(90deg);
    }

    100%   {
        -webkit-transform: translateY(0px);
    }

}

<svg version="1.1" id="Mitena" class="mitena-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="540px" height="540px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve">
<g id="Moon" class="moon">
     <path fill="blue" d="M260.858,9.204c-19.984,0-40.052,3.614-59.671,10.145c12.791-2.281,26.229-3.795,40.355-4.417
      c142.722-6.282,255.68,105.785,255.321,242.176c-0.455,165.917-129.458,241.071-240.945,240.161
      C113.667,496.123,14.171,397.187,7.45,256.812c-0.175-3.653-0.249-7.333-0.24-11.03c-1.228,9.561-1.656,18.999-1.196,28.216
      c7.606,152.364,118.345,257.64,275,257.64c140.437,0,254.818-95.765,254.818-254.772C535.832,128.59,424.337,9.204,260.858,9.204z
     "/>
</g>
</svg>

这是一个正在运行的例子：

http://jsfiddle.net/12jkrxsg/

Answer 1

与@vals一样，您应根据W3Schools使用forwards animation-fill-mode。

您也可以先尝试在其中创建元素的结束位置。所以，让我们说你希望元素动画并最终在页面的中心。您应该构建元素并将其设置为位于页面中心的样式。然后你可以添加一个动画，一旦动画结束，它会将元素重置为它的原始状态，这将是页面的中心。那是清楚的吗？

为元素使用多个css3动画

1 个答案: