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

我无法肯定地说，因为没有提供css，但我认为您的关键帧只会出现在移动设备的媒体查询中。像@media only screen and (max-width: 768px) {

这样的东西

Answer 2

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

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

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

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

2 个答案: