17、PostCSS动画与插件使用指南

PostCSS动画与插件使用指南

1. 测试与性能分析

在完成代码编写后，我们可以对演示进行测试。即使预览时演示外观可能没有变化，但我们已使用PostCSS进行代码编译。例如，为演示添加了 animation-name 属性并赋值为 bounce ，编译时PostCSS会添加相应的 @keyframes 规则。

性能方面，即便添加了额外的动画属性，帧率仍能达到48.29FPS，相比使用标准的 .animate() 表现出色。这表明，在可能的情况下，移除代码中对 .animate() 的依赖可以提升性能。虽然使用CSS样式进行内容动画化还不能完全取代JavaScript，但正在逐步发展。

2. 创建PostCSS演示

2.1 安装插件

为了创建一个简单的演示，我们将使用Jonathan Neal的 postcss-transform-shortcut 插件，可从 https://github.com/jonathantneal/postcss-transform-shortcut 获取。安装步骤如下：
1. 打开Node.js命令提示符会话，将工作文件夹切换到项目区域。
2. 在命令提示符中输入以下命令并按回车键：