using multiple css3 animations for an element

Question

I'm really confused with this one. I want my element (a moon) to drop down from top of the page where it is invisible and then immediately rotate once. But, unfortunately I couldn't make it. It drops down, then it waits a second or two, rotates and then it disapears. But I want it to stay in the page. This my code:

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

this is a running example:

http://jsfiddle.net/12jkrxsg/

If you want to keep the state of the end of the animation, add forwards to the animation property — vals
– vals, Commented Dec 20, 2014 at 21:00

arjabbar · Accepted Answer · 2014-12-21 00:27:50Z

1

Like @vals said you should use the forwards for animation-fill-mode according to W3Schools.

Also you can try creating the element in it's end position first. So let's say that you want the element to animate and end up in the center of the page. You should build the element and style it to be in the center of the page. Then you can add an animation to it, and once the animation finishes, it will reset the element to it's original state, which will be the center of the page. Was that clear?

answered Dec 21, 2014 at 0:27

arjabbar

6,4444 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using multiple css3 animations for an element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related