Question

我有带背景图片的元素。我正在使用关键帧动画在页面加载时增长这些元素。元素变得模糊，然后在它们生长后约5秒调整。有谁知道解决这个问题？以下是我的代码和我尝试过的内容：

动画：

@keyframes animation {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.2% { transform: matrix3d(2.099, 0, 0, 0, 0, 1.549, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.31% { transform: matrix3d(2.768, 0, 0, 0, 0, 1.884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.51% { transform: matrix3d(3.064, 0, 0, 0, 0, 2.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.62% { transform: matrix3d(3.127, 0, 0, 0, 0, 2.063, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  27.73% { transform: matrix3d(3.026, 0, 0, 0, 0, 2.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  38.84% { transform: matrix3d(2.995, 0, 0, 0, 0, 1.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.06% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.28% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

的CSS：

#two-box {
  background-image: url("your-brand-here.jpg");
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  background-size: 100% 100%;
  image-rendering: -webkit-optimize-contrast;
  border-style: solid;
  border-width: 2px;
  border-color: #7f8c8d;
}

HTML：

<div id="two-box" class="first-row-styles animation-target"></div>

Answer 1

尝试添加此内容：

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

关键帧动画制作图像模糊

1 个答案: