CSS3 animation scale

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?

Thanks in advance
Mauro

it seems an exact duplicate of http://stackoverflow.com/questions/6897724/css3-animate-how-to-have-the-object-not-revert-to-its-initial-position-after-an — Fabrizio Calderan, Feb 08 '12 at 15:54
Possible duplicate of [Maintaining the final state at end of a CSS3 animation](https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation) — Mike Aski, Oct 31 '18 at 14:01

score 11 · Accepted Answer · answered Feb 08 '12 at 16:46

11

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

answered Feb 08 '12 at 16:46

rgthree

7,039
16
20

score 1 · Answer 2 · answered Feb 26 '12 at 20:50

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');
});

CSS3 animation scale

2 Answers2

Linked