CSS3 animation scale [duplicate]

Question

I'm trying to animate a div so that when the page load it has scale(0,0) and animates to scale(1,1). The problem I have is that once the animation takes effect the div scales to 0 again. What I want is the div to animate to scale(1,1) and staying like that. Here's my CSS code

@-moz-keyframes bumpin { 0% { -moz-transform: scale(0,0); } 100% { -moz-transform: scale(1,1); } } .landing .board { -moz-transform: scale(0,0); -moz-transform-origin: 50% 50%; } .landing .board { -moz-animation-name: bumpin; -moz-animation-duration: 1s; -moz-animation-timing-function: ease; -moz-animation-delay: 0s; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; }

What am I doing wrong?

rgthree · Accepted Answer · 2012-02-08 16:46:51Z

You're looking for animation-fill-mode:forwards which applies the last keyframe of the nimation to the element when the animation is done. https://developer.mozilla.org/en/CSS/animation-fill-mode

-moz-animation-fill-mode: forwards

keune · Accepted Answer · 2012-02-26 20:50:48Z

Another way of doing this: If all you want to do is animate an element to scale, you don't need to use keyframes. transitions will suffice.

.landing-board { -moz-transition: all 1s ease; /* all other css properties */ } .landing-board.animated { -moz-transform: scale(1.1); }

And very little javascript to add the related class to your element: (Here i'm using jquery but it could be done in any other framework or pure javascript)

$(window).load(function() { $('.landing-board').addClass('animated'); });

Collectives™ on Stack Overflow

CSS3 animation scale [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related