Question

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

下面我放置了代码，这里是fiddle

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

Demo

此外，除了浏览器前缀的属性之外，还应包括未加修饰的属性版本。

请记住，将像图像这样的元素缩放到其全尺寸的4.3倍会使其变得模糊，因此最好将默认值（1 / 4.3）x启动，然后将其缩放到1动画。

使用CSS3缩小和增长元素

1 个答案: