Css "Glitch" animation bug

Question

i would like to made an glitch animation in Css like this one :

Glitch working on codepen So when i tried to do it my way, it didn't work. Mine version
I tried to change the class into an id, i try to modify the structure but none of my changes paid off, i also try to change the structure of the html code.

``` <div class="center">
<div class="text"  data-text:"Graphic Designer">
<a class="outline">Graphic</a>
<a class="inline">Designer</a>
<div class="text"  data-text:"Digital Creator">
<a class="inline">Digital</a>
<a class="outline">Creator</a> </div>

```

.text {
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
    font-style: oblique ;
    position: absolute;
    font-size: 9vw;
    font-weight: 500;
font-style: oblique ;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: #fff;
    white-space: nowrap;

    &:before, &:after {
        display: block;
        content: attr(data-text);
        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: all .3s cubic-bezier(.25, .46, .45, .94) both 5
        }
        &:after {
            animation: all .3s cubic-bezier(.25, .46, .45, .94) reverse both 5
        }
    }
}

@keyframes all {
    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)
    }
}

Could anyone help me please ?

Answer 1

The reasons the glitch effect didn't work on your Codepen example are:

1. You've set up CSS tab to use CSS, but what you've written is SCSS. Click the gear icon in CSS tab and set CSS Preprocessor to SCSS
2. Invalid HTML markup:
   1. You were using data-text:"Graphic Designer", but it should be data-text="Graphic Designer".
   2. Invalid nesting: Consider using the markup below so the <div> are closed properly:

    <div class="center">
      <div class="text"  data-text="Graphic Designer">
          <a class="outline">Graphic</a>
        <a class="inline">Designer</a>
      </div>
      <div class="text" data-text="Digital Creator">
          <a class="inline">Digital</a>
          <a class="outline">Creator</a>
      </div>
    </div>

Additionally, the effect will not properly work yet, as .text has position: absolute and you've two <div class="text">, so they'll overlap. But that is a separate question.

body {
  background-color: #232323;
}

.text {
  font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
  font-style: oblique;
  position: absolute;
  font-size: 9vw;
  font-weight: 500;
  font-style: oblique;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  white-space: nowrap;
}
.text:before, .text:after {
  display: block;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .8;
}
.text:after {
  color: #f0f;
  z-index: -2;
}
.text:before {
  color: #0ff;
  z-index: -1;
}
.text:hover:before {
  animation: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 5;
}
.text:hover:after {
  animation: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both 5;
}

@keyframes all {
  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);
  }
}

<div class="center">
  <div class="text"  data-text="Graphic Designer">
	  <a class="outline">Graphic</a>
    <a class="inline">Designer</a>
  </div>
</div>