CSS矩阵动画问题

前端之家收集整理的这篇文章主要介绍了CSS矩阵动画问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我最近试图创建一些矩阵动画.但我注意到一些奇怪的东西.以下代码在Firefox,Safari和Chrome上的工作方式不同:
  1. @-moz-keyframes matrix
  2. {
  3. from
  4. {
  5. -moz-transform: matrix(-1.0,0.0,-1.0,0.0);
  6. }
  7.  
  8. to
  9. {
  10. -moz-transform: matrix(1.0,2.0,3.0,1.0,12.0);
  11. }
  12. }
  13.  
  14. @-webkit-keyframes matrix
  15. {
  16. from
  17. {
  18. -webkit-transform: matrix(-1.0,0.0);
  19. }
  20.  
  21. to
  22. {
  23. -webkit-transform: matrix(1.0,12.0);
  24. }
  25. }

有没有办法解决这个问题?

解决方法

这似乎只是Gecko和Webkit渲染矩阵函数的方式的不同,这就是为什么它们仍然具有实验性供应商前缀的原因.我说没有“修复”这个问题的简洁方法,因为它完全取决于渲染引擎,所以你可能只需要修改这些值来获得相同的结果.

猜你在找的CSS相关文章