使用CSS3制作故障（Glitch）动画效果

05-15 次

标签 css3动画帧动画

什么是故障（Glitch）动画效果？你是否见过电视机或显示器发生故障时画面的抖动效果，那就是故障动画效果。来看下面的一个例子（将鼠标放在下面的文字上看看效果）：

Glitch

制作Glitch故障效果

可以使用任意HTML元素来创建的一个文字，这里使用一个<span>元素。

<span class="glitch">Glitch</span>

制作glitch故障动画使用的技术是CSS的:before和:after伪元素。

css glitch效果中的伪元素示意图 — 分别使用:before和:after伪元素来制作原文字的两个抖动图层效果。

为文字设置基本的CSS样式。设置文字的字体大小，粗细，颜色和定位等。

.glitch {
    font-size: 130px;
    line-height: 1;
    font-family:  sans-serif;
    font-weight: 700;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-decoration: none;
    color: #fff;
}

然后通过:before和:after伪元素来创建两个不同颜色的文字副本。注意创建:before和:after伪元素时，它们的content属性要和原文字相同，这里是content: 'Glitch';。并且这两个伪元素的z-index要低于原文字，使它们显示在原文字的背后。

.glitch:before, .glitch:after {
  display: block;
  content: 'Glitch';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .8;
}
.glitch:after {
  color: #f0f;
  z-index: -2;
}
.glitch:before {
  color: #0ff;
  z-index: -1;
}

接下来要制作鼠标滑过文字时的效果。目前，原文字和它的两个伪元素是相互堆叠在一起的。为了制作移动效果，这里采用keyframes帧动画。一共6共动画帧，每一帧都使用transform: translate属性来移动元素。

@keyframes glitch {
    0% {
        transform: translate(0)
    }
    20% {
        transform: translate(-5px, 5px)
    }
    40% {
        transform: translate(-5px, -5px)
    }
    60% {
        transform: translate(5px, 5px)
    }
    80% {
        transform: translate(5px, -5px)
    }
    to {
        transform: translate(0)
    }
}

开始和结束帧都是translate(0)，这代表3个元素在每次动画开始和结束时，都是相互重叠在初始位置的。

我们在鼠标滑过（悬停）时触发glitch动画：

.glitch:hover:before {
      animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:hover:after {
      animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}

注意上面的animation属性是一个简写的动画属性，上面的animation代码实际上包含了5个具体的CSS animation动画属性：

animation-name
animation-duration
animation-timing-function
animation-fill-mode
animation-iteration-count

关于这CSS animation动画属性的描述，可以参考CSS属性参考 | animation。

在这个故障（glitch）动画中，两个伪元素都执行了glitch动画，动画持续时间（animation-duration）都是0.3秒，easing动画（animation-timing-function）效果都是自定义的贝兹曲线，animation-fill-mode都是both，最后动画重复次数（animation-iteration-count）都是无限（infinite）。

为了制作更杂乱无章的效果，:after伪元素还设置了animation-direction动画方向为反向动画（reverse）。

一个完整的故障（glitch）动画效果制作完成了。为了使大家更清楚的了解整个glitch动画的过程，下面特意制作了一个“慢动作”版本的glitch动画。

Glitch