时间戳

首页 > 解决方案 > 显示动画

html - 显示动画

问题描述

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

.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>

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

如何使动画幻灯片更流畅？

标签： htmlcssanimationcss-animations

解决方案

您可以等待页面/图像加载，然后触发动画发生。下面的代码是用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>

推荐阅读