如何在页面加载时淡入图像答案

【问题标题】：How to fade in image on page load如何在页面加载时淡入图像
【发布时间】：2017-10-18 18:44:31
【问题描述】：

如何让我的图像在桌面设备和移动设备的页面加载时淡入淡出？目前我的代码仅适用于移动设备。

CSS：

#test img {
  width: auto; 
  height: 50px;
  position: absolute;
  -webkit-animation: fadein 7s;
  -moz-animation: fadein 7s;
  -ms-animation: fadein 7s; 
  -o-animation: fadein 7s; 
  animation: fadein 7s;
}

@media only screen and (max-width: 768px) {
  #test img { 
    width: auto; 
    height: 20px;
    position: absolute;
  }
}

【问题讨论】：

Using CSS for fade-in effect on page load的可能重复

标签： html css

【解决方案1】：

动画也需要关键帧，以便知道从哪里开始和结束。在这种情况下，您的 fadein 动画很接近。它还需要一个开始和结束的不透明度，以便它可以从不可见变为可见。尝试在下面添加关键帧：

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

在这里工作：https://jsfiddle.net/70p9cxdb/1/

【讨论】：

【解决方案2】：

我不能肯定地说，因为没有提供 css，但我认为您的关键帧将仅在移动设备的媒体查询中。类似@media only screen and (max-width: 768px) {

【讨论】：