显示动画答案

【问题标题】：Reveal animation显示动画
【发布时间】：2018-10-25 00:11:51
【问题描述】：

我编写了一个显示图像动画，并在创建过程中偶然发现了一个问题。

.container{
  overflow: hidden;
}

.image {
  background-image: url('https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg');
  background-size: cover;
  width: 400px;
  height: 400px;
  animation: 1s ease-out 0s 1 slideInFromLeft;
  overflow: hidden;
}

@keyframes slideInFromLeft {
  0% {
    transform: translatex(-100%);
  }
  100% {
    transform: translatex(0%);
  }
}

<div class="container">
  <div class="image">
  </div>
</div>

除了滑动不顺畅之外，动画似乎运行良好。它似乎有某种抖动。

如何让动画滑动更流畅？

【问题讨论】：

在你的 sn-p 中，我的动画加载很流畅
请注意，您使用的是高分辨率图像，因此动画可能会在图像加载之前结束
这对我来说似乎在抖动。拜托，你能看看这个网站左上角的标题图片，让我知道它在你那里是否工作顺利吗？ maximizemedia.co.uk
尝试使用简单的图像而不是高分辨率的图像然后进行比较
这似乎工作得更好！但是，我仍然坚持这个问题。我需要在我的网站上使用高分辨率图片。

标签： html css animation css-animations

【解决方案1】：

您可以等待页面/图像加载，然后触发动画发生。下面的代码是用js应用一次动画类的粗略方式。

window.onload = function() {
    var element = document.getElementById('img1');
    element.classList.add("show");
    element.classList.add("animate");
    
}

.container{
  overflow: hidden;
}

.image {
  background-image: url('https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg');
  background-size: cover;
  width: 400px;
  height: 400px;
  opacity: 0;
  overflow: hidden;
}

#img1.animate{
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

.show {
  opacity:1;
}

@keyframes slideInFromLeft {
  0% {
    transform: translatex(-100%);
  }
  100% {
    transform: translatex(0%);
  }
}

<div class="container">
  <div id="img1" class="image" >
  </div>
</div>

【讨论】：

【解决方案2】：

我会为此使用 <img> 元素并在加载时将其删除，在我将 src 传递给父级的 backgroundImage 之后，因为它已经加载：

let imageDivs = document.querySelectorAll('.image img');
for (var i = 0; i < imageDivs.length; i++) {
  imageDivs[i].addEventListener('load', imageLoaded)
}

function imageLoaded(e) {
  let div = e.target.closest('div');
  div.style.backgroundImage = 'url('+this.src+')';
  div.classList.add('loaded');
  div.removeChild(div.querySelector('img'));
}

.container{
  overflow: hidden;
}

.image {
  background-size: cover;
  width: 400px;
  height: 400px;
  transform: translatex(-100%);
  overflow: hidden;
}
.image.loaded{
  animation: slideInFromLeft 1s cubic-bezier(.5,0,.3,1) forwards;
}
.image img {
  height: 0;
}

@keyframes slideInFromLeft {
  0% {
    transform: translatex(-100%);
  }
  100% {
    transform: translatex(0);
  }
}

<div class="container">
  <div class="image">
    <img src="https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg">
  </div>
</div>

这会在加载该图像后立即触发特定<div>（如果您有多个）的动画，而不是在页面中的所有图像加载后触发所有动画（如果你使用window.load)。

但是，这并不意味着您应该在页面中加载大量资源。优化您的图像并为当前设备加载正确的尺寸是网站优化中非常重要的一步。为此，您应该使用srcset。

【讨论】：