在前端开发中，我们经常需要优化网站的性能，其中就包括fps（每秒帧数）。fps越高，页面的流畅度就越好。CSS也会影响网站的fps，所以我们需要知道如何查看CSS对fps的影响。

上面的代码演示了一个div元素沿着x轴移动。现在我们需要查看这个动画对fps的影响。我们可以通过Chrome浏览器的Performance工具来查看。

首先，打开Chrome浏览器，按下F12键打开开发者工具。选择Performance选项卡，点击左上角的录制按钮开始记录性能数据。然后，点击一下div元素，让动画开始运行。等待数秒后，点击停止按钮停止记录。

Performance数据分析

在Performance工具中，我们可以看到各种性能指标，比如CPU使用率、内存占用等。要查看CSS对fps的影响，需要选择FPS选项卡。在这个选项卡中，会显示fps的变化情况。
现在，我们来看一下上面的动画对fps的影响。在FPS选项卡中，我们可以看到一个帧率曲线。这条曲线反映了页面的fps变化情况。在这个例子中，我们可以看到曲线波动很厉害，因为动画的移动用了大量的CPU资源，导致页面的fps很低。通过优化CSS代码，我们可以让fps提高。

通过Chrome浏览器的Performance工具，可以很方便地查看CSS对fps的影响。优化CSS代码可以提高页面的性能，让用户获得更好的体验。