使用CSS3缩小和增长元素

Question

我正在尝试在DIV元素上实现增长和缩小效果,这是有效但动画从左到右工作.想从中心做到.

下面我放置了代码,这里是小提琴

    .elem {
        position:absolute;
        top : 50px;
        background-color:yellow;
        left:50px;
        height:30px;
        width:30px;
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation-name: grow;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: grow;
        -moz-animation-duration: 2s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
    }
    @-webkit-keyframes grow {
        from {
            height:30px;
            width:30px
        }
        to {
            height:130px;
            width:130px
        }
    }
    @-moz-keyframes grow {
        from {
    height:30px;
    width:30px
}
to {
    height:130px;
    width:130px
}
    }

我怎样才能做到这一点.

Answer 1

使用transform:scale(n)而不是改变宽度/高度

@-webkit-keyframes grow {
    from {
        -webkit-transform:scale(1);
    }
    to {
        -webkit-transform:scale(4.333);
    }
}

演示

此外,除了浏览器前缀之外,还应包括属性的未加前缀版本.

请记住,将像图像这样的元素缩放到其全尺寸的4.3倍会使其变得模糊,因此最好使默认(1/4.3)x开始,然后在动画中将其缩放到1.