浏览器和设备之间的动画效果不一致，可能是由于多种因素造成的。以下是一些可能的原因：

1. 浏览器兼容性：不同的浏览器可能会以不同的方式解释和渲染CSS和JavaScript代码。虽然大多数现代浏览器都支持CSS3动画和JavaScript，但是他们的实现方式可能有所不同，导致在某些情况下会出现动画效果不一致的情况。

2. 设备性能：不同的设备（例如手机、平板电脑、桌面电脑等）可能有不同的处理器速度、内存大小、屏幕分辨率和刷新率等，这些因素都可能影响动画的流畅度和一致性。

3. 网络延迟：如果动画效果依赖于从服务器加载的资源（例如图像、视频等），那么网络延迟可能会影响动画的加载和播放。

为了减轻或解决这种不一致性，你可以尝试以下几种方法：

1. 使用浏览器前缀：在CSS中，某些属性和值可能需要添加浏览器前缀（例如-webkit-，-moz-，-ms-等）以确保在所有浏览器中都能正确渲染。Materialize框架应该已经处理了这个问题，但如果你遇到了特定的浏览器兼容性问题，可能需要手动添加这些前缀。

2. 使用Autoprefixer：Autoprefixer是一个CSS后处理器，它可以自动添加所需的浏览器前缀。你可以将它与你的构建工具（例如Webpack，Gulp等）一起使用，以确保你的CSS在所有浏览器中都能正确渲染。

3. 使用Polyfill：Polyfill是一种代码片段，可以模拟那些在新浏览器中可用但在旧浏览器中不可用的功能。例如，如果你使用了某些较新的JavaScript特性，可能需要使用Polyfill来确保在老版本的浏览器中也能正常工作。

4. 优化动画：优化动画可以帮助提高其在不同设备和浏览器上的性能。例如，你可以减少动画的复杂性，降低帧率，或者使用requestAnimationFrame来更精确地控制动画的播放。

5. 测试：最后，确保在多种设备和浏览器上进行充分的测试，以发现和解决任何可能的兼容性问题。使用工具（例如BrowserStack）可以帮助你更方便地在不同的设备和浏览器上进行测试。

记住，前端开发经常需要处理各种设备和浏览器的兼容性问题。尽管这可能会带来一些挑战，但通过适当的测试和优化，你可以确保你的动画在所有设备和浏览器上都能良好地运行。