动画变换比例的最佳方法

【问题标题】：Best way to animate a transform scale动画变换比例的最佳方法
【发布时间】：2013-10-16 07:40:27
【问题描述】：

我想做一个简单的粉碎一些文本的效果。唯一的问题是，当我沿 Y 轴缩放时，它会从顶部和底部挤压，留下一个奇怪的浮动挤压元素。

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

我想把这只小狗往下挤，就像它的头上掉了重物一样。不只是从双方。知道如何达到预期的效果吗？

附件是我目前如何做的一个小提琴。 http://jsfiddle.net/54A9M/

【问题讨论】：

标签： css animation css-animations css-transforms

【解决方案1】：

您要查找的属性是 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

通常的值是“底部”，但随后它会压到字母下方的最低点（实际上是文本的真正底部）。

我在试错的基础上将其设置为 77%。

【讨论】：

这太完美了！谢谢，我想到了变换起源，但出于某种原因，我什么都没有！