如何实现CSS动画中图片从中心而非左侧向外缩放的效果

要实现从中心向外缩放的效果，更推荐你把动画从修改width改成用transform: scale()实现，性能更好，也更容易控制缩放原点，修改步骤如下：

• 给img选择器新增transform-origin: center配置，指定变换的原点为元素中心
• 把所有keyframes里的width属性修改替换为transform: scale()属性，初始状态设为0，结束状态设为1

修改后的完整CSS代码如下：

img {
    width: 500px;
    height: 250px;
    transform-origin: center;
    -moz-animation: scale 0.5s; /* Firefox */
    -webkit-animation: scale 0.5s; /* Safari and Chrome */
    -o-animation: scale 0.5s; /* Opera */
    animation: scale 0.5s;
}
@keyframes scale {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@-moz-keyframes scale { /* Firefox */
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@-webkit-keyframes scale { /* Safari and Chrome */
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@-o-keyframes scale { /* Opera */
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

如果你一定要保留修改width的实现方式，需要给img的父元素添加text-align: center属性，同时给img本身设置margin: 0 auto，也能实现类似中心扩展的效果，但这种方式会触发页面重排，动画流畅度不如用transform的方案。

内容的提问来源于stack exchange，提问作者LouiseF