时间戳

首页 > 解决方案 > 自动在一行 CSS 中淡入淡出同一张图片

javascript - 自动在一行 CSS 中淡入淡出同一张图片

问题描述

我有一张想要自动淡入淡出的图像。我已经阅读过关于过渡和动画的内容，并且想使用一种或两种样式（不是样式声明）。可以通过 JavaScript 启动动画。

在MDN 上的这个示例中，您可以看到通过切换类在页面加载时对项目进行动画处理。我希望它比这更简单。

这是我到目前为止所拥有的，它似乎应该可以工作，但事实并非如此。

function updateTransition(id) {
  var myElement = document.getElementById(id);
  var opacity = myElement.style.opacity;
  if (opacity==null || opacity=="") opacity = 1;
  myElement.style.opacity = opacity==0 && opacity!="" ? 1 : 0;
}

var id = window.setInterval(updateTransition, 5000, "myElement");
updateTransition("myElement");
#myElement {
    background-color:#f3f3f3;
    width:100px;
    height:100px;
    top:40px;
    left:40px;
    font-family: sans-serif;
    position: relative;
    animation: opacity 3s linear 1s infinite alternate;
}
<div id="myElement"></div>

此外，这里是使用幻灯片动画的无限循环动画示例（列表中的 3 个示例）。我想要同样的，但不透明。

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

链接的问题与此不同。正如我所说，“单线样式（不是样式声明）”。

标签： javascripthtmlcss

解决方案

您需要的是使用关键帧定义动画。如果您尝试应用多个动画，您可以为动画 CSS 属性提供参数列表。这是一个应用滑入和淡入淡出动画的示例。

.fade {
  width:100px;
  height:100px;
  background-color:red;
  position:relative;
  animation-name:fadeinout, slidein;
  animation-duration:2s, 1s;
  animation-iteration-count:infinite, 1;
  animation-direction:alternate, normal;
}

@keyframes fadeinout {
  0% {
    opacity:0
  }

  100% {
    opacity:100
  }
}

@keyframes slidein {
  from {
    left:-100px;
  }
  
  to {
    left:0px;
  }
}
<div class='fade'>

</div>

推荐阅读