使用多个css3动画元素

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

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

来源

2014-12-20 Afshin

如果要保留动画结束的状态，请将* forwards *添加到动画属性 – vals

就像@vals说你应该根据W3Schools使用forwards的animation-fill-mode。

另外，您可以尝试首先在其结束位置创建元素。因此，让我们假设您希望元素进行动画并最终位于页面的中心。您应该构建元素并将其设置为页面的中心。然后你可以给它添加一个动画，一旦动画完成，它会将元素重置为它的原始状态，这将成为页面的中心。清楚了吗？

来源

2014-12-21 00:27:50 arjabbar

使用多个css3动画元素

回答

相关问题