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

Question

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

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

Answer 1

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

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

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

Answer 2

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