css实现动画机能优化-百分百源码网

css实现动画机能优化

发布时间：09/01 来源：未知浏览：关键词：

本文来自CSS入门教程栏目，文中为大家介绍了css实现动画机能优化的办法，拥有一定的参照价值，但愿可以帮忙到大家。优化办法：可以运用css、jquery、canvas制作动画。

开启硬件加快在webkit中有奇异的万金油：opacity: 1;或者-webkit-backface-visibility: hidden;。

c、可否是有高耗损的属性（css shadow、gradients、background-attachment: fixed等）

有的话，图片也是一种选中。这算得上是用空间换工夫的优化了。

d、repaint的面积

要是是，只好缩小动画面积了。这一步的优化有限;

e、尽量运用 transform 生成动画，以免运用 height,width,margin,padding 等；如下列例子1和例子2。

PS：运用 transform，阅读器只需要一次生成这个元素的位图，并在动画开端的时候将它提交给 GPU 去处置。之后，阅读器不需要再做任何布局、绘制以及提交位图的操纵。从而，阅读器可以充分应用 GPU 的拿手去迅速地将位图绘制在不一样的位置、施行扭转或缩放处置。简而言之，transform 动画由GPU控制，支撑硬件加快，并不需要软件方面的渲染

三、动画历程有闪耀（个别涌现在动画开端）

解决办法：

.cube {
 
   -webkit-backface-visibility: hidden;
 
   -moz-backface-visibility: hidden;
 
   -ms-backface-visibility: hidden;
 
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
 
   -moz-perspective: 1000;
 
   -ms-perspective: 1000;
 
   perspective: 1000;
 
   /* Other transform properties here */
 
}

在webkit内核的阅读器中，另一个卓有成效的办法是：

.cube {
 
   -webkit-transform: translate3d(0, 0, 0);
 
   -moz-transform: translate3d(0, 0, 0);
 
   -ms-transform: translate3d(0, 0, 0);
 
   transform: translate3d(0, 0, 0);
 
  /* Other transform properties here */
 
}

相干视频教程举荐：css视频教程

以上就是css实现动画机能优化的细致内容，更多请关注百分百源码网其它相干文章！

打赏