0

我使用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

4

1 回答 1

2

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

如果您确实想在桌面浏览器上对 2D 变换（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');
}

你会很高兴的。

于 2014-05-31T22:48:14.293 回答