CODEWITHSUNDEEP
cssanimationcss-animationscss-transforms
Gant Laborde
Gant Laborde

Reputation: 6774

Best way to animate a transform scale

I'm looking to do a simple effect of crushing some text. Only problem is, when I scale along the Y axis, it squeezes from top and bottom, leaving a strange floating squeezed element.

@-webkit-keyframes crush_head {
    from {
        -webkit-transform:scaleY(1); /* Safari and Chrome */
    }
    to {
        -webkit-transform:scaleY(0.5); /* Safari and Chrome */
    }
}

I want to squeeze this puppy DOWN like it's getting a weight dropped on it's head. NOT just from both sides. Any idea how to achieve the desired effect?

Attached is a fiddle of how I'm currently doing this. http://jsfiddle.net/54A9M/

Upvotes: 2

Views: 4058

Answers (1)

vals
vals

Reputation: 64254

The property that you are looking for is transform-origin-y:

-webkit-transform-origin-y: 77%;


.crush {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    border-top: 1px solid black;
    -webkit-animation-fill-mode: forwards;    
    -webkit-animation-name: crush_head;
    -webkit-animation-duration:3s;
    -webkit-animation-timing-function:ease-in;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin-y: 77%;
}

updated demo

The usual value would be "bottom", but then it will crush to the lowest point under the letters (in fact, to the real bottom of the text).

I set it to 77% on a trial an error basis.

Upvotes: 3

Related Questions