如何（动画）从中心而不是从左侧向外扩展

Question

我在 jsfiddle 上有以下代码，但我希望图像从中心向外扩展，而不是从左侧扩展

我需要在代码中添加什么才能实现这一点？

提前致谢

https://jsfiddle.net/kayanna/oc9jyruq/6/

img {
    width: 500px;
    height: 250px;
    -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 {
        width:0px;
    }
        to {
            width:500px;
        }
    }
    @-moz-keyframes scale { /* Firefox */
        from {
            width:0px;
        }
        to {
            width:500px;
        }
    }
    @-webkit-keyframes scale { /* Safari and Chrome */
        from {
            width:0px;
        }
        to {
            width:500px;
        }
    }
    @-o-keyframes scale { /* Opera */
        from {
            width:0px;
        }
        to {
            width:500px;
        }
    }
}

Answer 1

此代码段假定您希望从一开始就为展开后的图像保留 space - 即展开后不会改变周围元素的位置。

它将 img 元素替换为适当大小的 div 并将伪元素附加到具有所需图像作为背景并且在 X 轴上从 0 到全尺寸动画的伪元素。这使得图像从中心而不是左侧扩展。

.expandimg {
  width: 500px;
  height: 250px;
  position: relative;
}

div::before {
  content: '';
  animation: scale 0.5s;
  background-image: url(https://cdn.pixabay.com/photo/2020/04/01/01/02/science-4989678_960_720.png);
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
}

@keyframes scale {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(100%);
  }
}

<div class="expandimg"></div>

如何（动画）从中心而不是从左侧向外扩展

How to (animated) scale out from center instead of from the left side

css

animation

keyframe

css-animations

css-animation-direction