渐隐渐显

渐隐渐显主要通过对元素的透明度操作进行。当然也可以使用纯 CSS 来进行设计。

下面是纯 js 技术：

✂️

html

<style>
  .block {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 20px;
    top: 200xp;
    background-color: #f00;
  }
</style>
<div class="block" id="block"></div>
<script>
  var temp = document.querySelector('div');
  fade(temp, 100, true);
  function fade(e, t, io) {
    var t = t || 10;
    if (io) {
      var i = 0;
    } else {
      var i = 100;
    }
    var out = setInterval(function () {
      setOpacity(e, i);
      if (io) {
        i++;
        if (i >= 1) clearTimeout(out);
      } else {
        i--;
        if (i <= 0) clearTimeout(out);
      }
    }, t);
  }

  function setOpacity(e, n) {
    var n = parseFloat(n);
    if ((n && n > 100) || !n) n = 100;
    if (n && n < 0) n = 0;
    if (e.filters) {
      e.style.filters = 'alpha(opacity=' + n + ')';
    } else {
      e.style.opacity = n / 100;
    }
  }
</script>

下面是纯 CSS 设计显隐：

✂️

html

<style>
  .block {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 20px;
    top: 200xp;
    background-color: #f00;
    animation: fide 2s ease-in-out 0.3s infinite alternate;
  }
  @keyframes fide {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
</style>
<div class="block " id="block"></div>

由此可见， CSS 3 动画在代码数上更胜一筹，但个有利弊。最好的就是 CSS 与 JS 一起用。怎么方便怎么来。