Question

我使用velocity.js试图看到CSS3动画和Javascript动画之间的区别。

对于CSS3，我的动画是在h1和h2元素上

/* HeaderIntro */
@keyframes headerintro {
  0% {
    opacity: 0;
    margin-right: 15rem;
  } 

  100% {
    opacity: 1;
    margin-right: 0;
  }
}

/* SubHeaderIntro */
@keyframes subheaderintro {
  0% {
    opacity: 0;
    margin-left: 15rem;
  } 

  100% {
    opacity: 1;
    margin-left: 0;
  }
}

/* TitlePulse */
@keyframes titlepulse {
  50% {
    transform: scale(.98);
  }
}

我的velocity.js版本是

$(document).ready(function() {

  headerIntro();
  headerPulse();
});


$mainHeader = $('.mainheader');

function headerIntro() {
  $subHeader = $('.subheader');
  $mainHeader.css('margin-left', '-15rem').css('opacity', 0)
             .velocity({'margin-left': '0rem', opacity: 1}, 750, 'ease-in-out');
  $subHeader.css('margin-left', '15rem').css('opacity', 0)
            .velocity({'margin-left': '0rem', opacity: 1}, 750, 'ease-in-out', {queue: false});
}

function headerPulse() {
  $mainHeader.velocity({scale: '95%'}, 850, 'ease-in-out')
             .velocity({scale: '100%'}, 850, 'ease-in-out', headerPulse);
}

由于某种原因，速度示例的脉冲标题有不稳定的帧。

继承了CSS3的代码：http://codepen.io/Snowfiring/pen/Beiba

这是Velocity的代码：http://codepen.io/Snowfiring/pen/jbuvy

Answer 1

JavaScript支持的CSS转换的一个优点是，桌面浏览器上的2D转换不会自动触发硬件加速（HA） - 这意味着默认情况下文本不会变得模糊。

如果您确实希望在桌面浏览器上启用二维变换（translateX / Y，rotateZ）上的HA，并从其提供的子像素采样中受益，则在动画期间将translateZ属性设置为0。

（有关此主题的更多信息，请参阅Velocity的文档：http://velocityjs.org/#transforms。）

只需将功能更改为以下内容：

function headerIntro() {
  $subHeader = $('.subheader');
  $mainHeader.css('margin-left', '-15rem').css('opacity', 0)
         .velocity({'margin-left': '0rem', opacity: 1, translateZ: 0}, 750, 
                    'ease-in-out');
  $subHeader.css('margin-left', '15rem').css('opacity', 0)
        .velocity({'margin-left': '0rem', opacity: 1, translateZ: 0}, 750, 
                    'ease-in-out', {queue: false});
}

function headerPulse() {
  $mainHeader.velocity({scale: '98%', translateZ: 0 }, 850, 'ease-in-out')
             $mainHeader.velocity({scale: '100%', translateZ: 0 }, 850, 
                                   'ease-in-out');
}

你会很高兴。

Javascript让动画更慢？

1 个答案: