Css "Glitch" animation bug - html

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:
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
Invalid HTML markup:
You were using data-text:"Graphic Designer", but it should be data-text="Graphic Designer".
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>