CSS3 Glitch Animation

css3-glitch-animation.markdown

CSS3 Glitch Animation

CSS3 Glitch Effect inspired by Kikk.be and Year in review.

Related tutorial: https://ihatetomatoes.net/how-to-create-css-glitch-effect/

A Pen by Petr Tichy on CodePen.

License.

index.html

<div class="box small">
  <a href="#" class="glitch">Start</a>
</div>
<div class="box">
  <a href="#" class="glitch">10</a>
</div>
<div class="box medium">
  <a href="#" class="glitch">CSS Glitch</a>
</div>

script.js

// no js here

style.scss

html,body {
  min-height: 100%;
  height: 100%;
}
body {
  background-color: #2B0059;
  color: #fff;
  display: flex;
  flex-direction: row;
}
.box {
  width: 33%;
  position: relative;
  height: 100%;
  &.small {
    background-color: #86D0F2;
  }
  &.medium {
    background-color: #F4C4D5;
  }
}
.glitch {
  font-size: 130px;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-decoration: none;
  color: #fff;
  &:before,
  &:after{
    display: block;
    content: '10';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .8;
  }
  &:after {
    color: #f0f;
    z-index: -2;
  }
  &:before {
    color: #0ff;
    z-index: -1;
  }
  &:hover {
    &:before {
      animation: glitch-left .3s cubic-bezier(.25, .46, .45, .94) both infinite
    }
    &:after {
      animation: glitch-left-2 .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite
    }
  }
  .small & {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 2px;
    &:before,
    &:after{
      content: 'Start';
    }
    &:after {
      color: #F40080;
    }
    &:before {
      color: #7FA500;
    }
    &:hover {
    &:before {
        animation: glitch-small .5s cubic-bezier(.25, .46, .45, .94) both infinite
      }
      &:after {
        animation: glitch-small .5s cubic-bezier(.25, .46, .45, .94) reverse both infinite
      }
    }
  }
  .medium & {
    font-size: 40px;
    letter-spacing: 2px;
    text-align: center;
    color: #4222F1;
    &:before,
    &:after{
      content: 'CSS Glitch';
    }
    &:after {
      color: #C487C2;
    }
    &:before {
      color: #00FF02;
    }
    &:hover {
    &:before {
        animation: glitch-medium .5s cubic-bezier(.25, .46, .45, .94) both infinite
      }
      &:after {
        animation: glitch-medium .5s cubic-bezier(.25, .46, .45, .94) reverse both infinite
      }
    }
  }
}
@keyframes glitch-small {
    0% {
        transform: translate(0)
    }
    33% {
        transform: translate(2px, 1px)
    }
    66% {
        transform: translate(-1px, -1px)
    }
    to {
        transform: translate(0)
    }
}
@keyframes glitch-medium {
    0% {
        transform: translate(0)
    }
    20% {
        transform: translate(-2px, 2px)
    }
    40% {
        transform: translate(-2px, -2px)
    }
    60% {
        transform: translate(2px, 2px)
    }
    80% {
        transform: translate(2px, -2px)
    }
    to {
        transform: translate(0)
    }
}
@keyframes glitch-left {
    0% {
        transform: translate(0)
    }
    33% {
        transform: translate(-5px, 3px)
    }
    66% {
        transform: translate(5px, -3px)
    }
    to {
        transform: translate(0)
    }
}
@keyframes glitch-left-2 {
    0% {
        transform: translate(0)
    }
    33% {
        transform: translate(-5px, -3px)
    }
    66% {
        transform: translate(5px, 2px)
    }
    to {
        transform: translate(0)
    }
}

styles

<link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet" />