在【#CSS-动画-CSS-Animations】这里html用p标签容易造成误导

[StarkL]

语法：transform: scale() 默认是以元素的水平垂直中心为源心，进行扩大/缩放。、

造成问题：这里用p标签，作为块级元素，它的源心就在hello文本的右侧，进行动画的时候文本在位置上，先往左移动，然后向右移动，给不注意的读者造成以为是scale出问题的错觉。针对这个，还真有人提问的，如：https://segmentfault.com/q/1010000007612783

所以应该将它更改为 非块级标签或者给定合适的宽高更方便读着理解。

[chrisvfritz]

@StarkL I'm sorry I can't respond in Chinese, but I think I understand the content. 😅 The animation is actually behaving as expected, as "bounce" accurately describes first moving one direction (the left) and then the opposite (the right).

@Jinjiang If I have mistranslated or misunderstood, please correct me and I'm happy to reopen. 🙂

[Jinjiang]

@chrisvfritz imo it indeed misleads someone to understand the example code. Actually the expected effect should be zooming the text size to 150% in (50% { transform: scale(1.5) }) at the beginning and then zooming it out to normal size at the end, not moving to left first and moving to right at the end.

My suggestion is similar with @StarkL , but not change it into span. Maybe a inline-block element is much better because its transform-origin is just the center of the text, or add a border to the block element.

Thanks.

@StarkL 简略翻译一下，我认同你的判断，修改意见上，我倾向于修改为一个 inline-block 的元素，这样它的缩放中心一定是文字的中心，不会给人造成误解；或者给 <p> 加个边框，同样是可以的。

谢谢

[chrisvfritz]

@Jinjiang I'm still not understanding which part is misleading, but it sounds like you'd prefer a different kind of bounce animation? I'm fine with that and I believe transform-origin: left would create what you're looking for, behaving the same way on both block and inline-block elements. A PR is welcome. 🙂

[Jinjiang]

Does this demo make sense? https://jsfiddle.net/hrxbz87s/
The first two effects almost look the same.