Firefox使用css转换冻结

时间：2015-03-23 12:59:28

标签： javascript html css firefox transform

我正在尝试使这个动画http://codepen.io/mallendeo/pen/zxRwWx跨浏览器，但似乎firefox因某些原因不接受它。一旦鼠标移动它就会冻结，甚至关键帧动画也不起作用。奇怪的是，甚至IE在某种程度上显示它，这让我想知道这个问题是不是来自JS而不是CSS，但我不能在这段代码中看到任何错误，这会让mozilla特别冻结。

＆＃13;
＆＃13; 
const sentence = document.querySelector('.sentence')
const h1 = document.querySelector('h1')
const h2 = document.querySelector('h2')

let wordsToArray = (str) => str.split('').map(e => e === ' ' ? ' ' : e)

function insertSpan(elem, letters, startTime) {
  elem.textContent = ''
  let curr = 0
  let delay = 20
  for(let letter of letters) {
    let span = document.createElement('span')
    span.innerHTML = letter
    span.style.animationDelay = (++curr / delay + (startTime || 0)) + 's'
    elem.appendChild(span)
  }
}

insertSpan(h1, wordsToArray(h1.textContent))
insertSpan(h2, wordsToArray(h2.textContent), .5)

document.addEventListener('mousemove', e => {  
  let xpos = e.layerX || e.offsetX
  let ypos = e.layerY || e.offsetY
  
  let ax = -(window.innerWidth / 2 - xpos) / 20
  let ay = (window.innerHeight / 2 - ypos) / 10
  
  sentence.style.transform = `rotateY(${ax}deg) rotateX(${ay}deg)`
})
＆＃13; 
*, *:after, *:before {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #F0544F;
  font-family: Roboto, sans-serif;
}

body {
  display: flex;
}

body, .container, .sentence {
  transform-style: preserve-3d;
  perspective: 30em;
}

.container {
  margin: auto;
  -webkit-box-reflect: below -2em -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255,255,255,.4)));
  pointer-events: none;
}

.sentence {
  margin: auto;
  font-size: 4em;
  color: #f0f0f0;
  text-align: center;
  span {
    display: inline-block;
    will-change: transform;
    animation: animation 2s linear infinite alternate;
    opacity: 0;
  }
  h1 {
    font-weight: bold;
  }
  h2 {
    font-weight: thin;
  }
}

// psssst! http://bouncejs.com/
@keyframes animation { 
  0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.666667% { transform: matrix3d(0.19514, 0, 0, 0, 0, 0.19514, 0, 0, 0, 0, 1, 0, 0, -3.8179, 0, 1); }
  3.333333% { transform: matrix3d(0.48061, 0, 0, 0, 0, 0.48061, 0, 0, 0, 0, 1, 0, 0, -16.89184, 0, 1); }
  5% { transform: matrix3d(0.78868, 0, 0, 0, 0, 0.78868, 0, 0, 0, 0, 1, 0, 0, -35.82897, 0, 1); }
  6.666667% { transform: matrix3d(1.06298, 0, 0, 0, 0, 1.06298, 0, 0, 0, 0, 1, 0, 0, -54.24398, 0, 1); }
  8.333333% { transform: matrix3d(1.26541, 0, 0, 0, 0, 1.26541, 0, 0, 0, 0, 1, 0, 0, -67.42532, 0, 1); }
  10% { transform: matrix3d(1.37835, 0, 0, 0, 0, 1.37835, 0, 0, 0, 0, 1, 0, 0, -73.79667, 0, 1); }
  11.666667% { transform: matrix3d(1.40302, 0, 0, 0, 0, 1.40302, 0, 0, 0, 0, 1, 0, 0, -74.15221, 0, 1); }
  13.333333% {  opacity: 1; transform: matrix3d(1.35507, 0, 0, 0, 0, 1.35507, 0, 0, 0, 0, 1, 0, 0, -70.32855, 0, 1); }
  15% { transform: matrix3d(1.25874, 0, 0, 0, 0, 1.25874, 0, 0, 0, 0, 1, 0, 0, -64.25506, 0, 1); }
  16.666667% { transform: matrix3d(1.14088, 0, 0, 0, 0, 1.14088, 0, 0, 0, 0, 1, 0, 0, -57.53621, 0, 1); }
  18.333333% { transform: matrix3d(1.02595, 0, 0, 0, 0, 1.02595, 0, 0, 0, 0, 1, 0, 0, -51.35907, 0, 1); }
  20% { transform: matrix3d(0.93241, 0, 0, 0, 0, 0.93241, 0, 0, 0, 0, 1, 0, 0, -46.51039, 0, 1); }
  21.666667% { transform: matrix3d(0.87106, 0, 0, 0, 0, 0.87106, 0, 0, 0, 0, 1, 0, 0, -43.40452, 0, 1); }
  23.333333% { transform: matrix3d(0.84491, 0, 0, 0, 0, 0.84491, 0, 0, 0, 0, 1, 0, 0, -42.11433, 0, 1); }
  25% { transform: matrix3d(0.85043, 0, 0, 0, 0, 0.85043, 0, 0, 0, 0, 1, 0, 0, -42.42524, 0, 1); }
  26.666667% { transform: matrix3d(0.87962, 0, 0, 0, 0, 0.87962, 0, 0, 0, 0, 1, 0, 0, -43.92027, 0, 1); }
  28.333333% { transform: matrix3d(0.92232, 0, 0, 0, 0, 0.92232, 0, 0, 0, 0, 1, 0, 0, -46.08478, 0, 1); }
  30% { transform: matrix3d(0.96839, 0, 0, 0, 0, 0.96839, 0, 0, 0, 0, 1, 0, 0, -48.40959, 0, 1); }
  31.666667% { transform: matrix3d(1.00942, 0, 0, 0, 0, 1.00942, 0, 0, 0, 0, 1, 0, 0, -50.47334, 0, 1); }
  33.333333% { transform: matrix3d(1.0397, 0, 0, 0, 0, 1.0397, 0, 0, 0, 0, 1, 0, 0, -51.99258, 0, 1); }
  35% { transform: matrix3d(1.05659, 0, 0, 0, 0, 1.05659, 0, 0, 0, 0, 1, 0, 0, -52.83794, 0, 1); }
  36.666667% { transform: matrix3d(1.06028, 0, 0, 0, 0, 1.06028, 0, 0, 0, 0, 1, 0, 0, -53.02083, 0, 1); }
  38.333333% { transform: matrix3d(1.05311, 0, 0, 0, 0, 1.05311, 0, 0, 0, 0, 1, 0, 0, -52.65993, 0, 1); }
  40% { transform: matrix3d(1.0387, 0, 0, 0, 0, 1.0387, 0, 0, 0, 0, 1, 0, 0, -51.93743, 0, 1); }
  41.666667% { transform: matrix3d(1.02107, 0, 0, 0, 0, 1.02107, 0, 0, 0, 0, 1, 0, 0, -51.05459, 0, 1); }
  43.333333% { transform: matrix3d(1.00388, 0, 0, 0, 0, 1.00388, 0, 0, 0, 0, 1, 0, 0, -50.19419, 0, 1); }
  45% { transform: matrix3d(0.98989, 0, 0, 0, 0, 0.98989, 0, 0, 0, 0, 1, 0, 0, -49.4943, 0, 1); }
  46.666667% { transform: matrix3d(0.98072, 0, 0, 0, 0, 0.98072, 0, 0, 0, 0, 1, 0, 0, -49.03539, 0, 1); }
  48.333333% { transform: matrix3d(0.9768, 0, 0, 0, 0, 0.9768, 0, 0, 0, 0, 1, 0, 0, -48.83983, 0, 1); }
  50% { transform: matrix3d(0.97763, 0, 0, 0, 0, 0.97763, 0, 0, 0, 0, 1, 0, 0, -48.88146, 0, 1); }
  51.666667% { transform: matrix3d(0.98199, 0, 0, 0, 0, 0.98199, 0, 0, 0, 0, 1, 0, 0, -49.09973, 0, 1); }
  53.333333% { transform: matrix3d(0.98838, 0, 0, 0, 0, 0.98838, 0, 0, 0, 0, 1, 0, 0, -49.41905, 0, 1); }
  55% { transform: matrix3d(0.99527, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, -49.76363, 0, 1); }
  56.666667% { transform: matrix3d(1.00141, 0, 0, 0, 0, 1.00141, 0, 0, 0, 0, 1, 0, 0, -50.07044, 0, 1); }
  58.333333% { transform: matrix3d(1.00594, 0, 0, 0, 0, 1.00594, 0, 0, 0, 0, 1, 0, 0, -50.29687, 0, 1); }
  60% { transform: matrix3d(1.00846, 0, 0, 0, 0, 1.00846, 0, 0, 0, 0, 1, 0, 0, -50.4232, 0, 1); }
  61.666667% { transform: matrix3d(1.00902, 0, 0, 0, 0, 1.00902, 0, 0, 0, 0, 1, 0, 0, -50.4508, 0, 1); }
  63.333333% { transform: matrix3d(1.00794, 0, 0, 0, 0, 1.00794, 0, 0, 0, 0, 1, 0, 0, -50.39716, 0, 1); }
  65% { transform: matrix3d(1.00579, 0, 0, 0, 0, 1.00579, 0, 0, 0, 0, 1, 0, 0, -50.28941, 0, 1); }
  66.666667% { transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, -50.15758, 0, 1); }
  68.333333% { transform: matrix3d(1.00058, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, -50.02902, 0, 1); }
  70% { transform: matrix3d(0.99849, 0, 0, 0, 0, 0.99849, 0, 0, 0, 0, 1, 0, 0, -49.9244, 0, 1); }
  71.666667% { transform: matrix3d(0.99712, 0, 0, 0, 0, 0.99712, 0, 0, 0, 0, 1, 0, 0, -49.85578, 0, 1); }
  73.333333% { transform: matrix3d(0.99653, 0, 0, 0, 0, 0.99653, 0, 0, 0, 0, 1, 0, 0, -49.82653, 0, 1); }
  75% { transform: matrix3d(0.99665, 0, 0, 0, 0, 0.99665, 0, 0, 0, 0, 1, 0, 0, -49.8327, 0, 1); }
  76.666667% { transform: matrix3d(0.99731, 0, 0, 0, 0, 0.99731, 0, 0, 0, 0, 1, 0, 0, -49.86535, 0, 1); }
  78.333333% { transform: matrix3d(0.99826, 0, 0, 0, 0, 0.99826, 0, 0, 0, 0, 1, 0, 0, -49.91311, 0, 1); }
  80% { transform: matrix3d(0.99929, 0, 0, 0, 0, 0.99929, 0, 0, 0, 0, 1, 0, 0, -49.96465, 0, 1); }
  81.666667% { transform: matrix3d(1.00021, 0, 0, 0, 0, 1.00021, 0, 0, 0, 0, 1, 0, 0, -50.01054, 0, 1); }
  83.333333% { transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, -50.0444, 0, 1); }
  85% { transform: matrix3d(1.00127, 0, 0, 0, 0, 1.00127, 0, 0, 0, 0, 1, 0, 0, -50.0633, 0, 1); }
  86.666667% { transform: matrix3d(1.00135, 0, 0, 0, 0, 1.00135, 0, 0, 0, 0, 1, 0, 0, -50.06743, 0, 1); }
  88.333333% { transform: matrix3d(1.00119, 0, 0, 0, 0, 1.00119, 0, 0, 0, 0, 1, 0, 0, -50.0594, 0, 1); }
  90% { transform: matrix3d(1.00087, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, -50.04329, 0, 1); }
  91.666667% { transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00047, 0, 0, 0, 0, 1, 0, 0, -50.02357, 0, 1); }
  93.333333% { transform: matrix3d(1.00009, 0, 0, 0, 0, 1.00009, 0, 0, 0, 0, 1, 0, 0, -50.00434, 0, 1); }
  95% { transform: matrix3d(0.99977, 0, 0, 0, 0, 0.99977, 0, 0, 0, 0, 1, 0, 0, -49.98869, 0, 1); }
  96.666667% { transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, -49.97843, 0, 1); }
  98.333333% { transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, -49.97405, 0, 1); }
  100% {  opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -50, 0, 1); } 
}
＆＃13; 
<div class="container">
  <div class="sentence">
    <h1> Yay! Jelly text </h1>
    <h2> move your mouse around </h2>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题