在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多：

Animation Principles for the Web[[译文]网页动画的十二原则](https://cssanimation.rocks/cn...

其中使用的示例 DEMO 属于比较简单易懂，但是没有很好地体现在实际生产中应该如何灵活运用。今天本文将带大家再次复习复习，并且替换其中的最基本的 DEMO，换成一些到今天非常实用，非常酷炫的动画 DEMO 效果。

Squash and stretch -- 挤压和拉伸

挤压和拉伸的目的是为绘制的对象赋予重量感和灵活性。它可以应用于简单的物体，如弹跳球，或更复杂的结构，如人脸的肌肉组织。

应用在动画中，这一原则最重要的方面是对象的体积在被挤压或拉伸时不会改变。如果一个球的长度被垂直拉伸，它的宽度（三个维度，还有它的深度）需要相应地水平收缩。

看看上面这张图，很明显右边这个运动轨迹要比左边的真实很多。

原理动画如下：

类似的一些比较有意思的 Web 动画 DEMO：

CodePen Demo -- CSS Flippy Loader