Css Ошибка анимации "Glitch"

Question

Я хотел бы сделать анимацию сбоев в Css, например, такую:

Сбои, работающие на codepen Так что, когда я попытался сделать это по-своему, это не сработало , Моя версия
Я пытался изменить класс на id, я пытаюсь изменить структуру, но ни одно из моих изменений не окупилось, я также пытаюсь изменить структуру кода html.

``` <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)
    }
}

Может кто-нибудь помочь мне, пожалуйста?

Answer 1

Причины, по которым эффект сбоя не сработал на вашем примере Codepen:

1. Вы настроили вкладку CSS для использования CSS, но вы написали S CSS. Щелкните значок шестеренки на вкладке CSS и установите CSS Препроцессор на S CSS
2. Недопустимая HTML разметка:
   1. Вы использовали data-text:"Graphic Designer", но это должно быть data-text="Graphic Designer".
   2. Недопустимая вложенность: рассмотрите возможность использования разметки ниже, чтобы <div> были правильно закрыты:

    <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>

Кроме того, эффект не будет пока правильно работать, так как .text имеет position: absolute, а у вас два <div class="text">, поэтому они будут перекрываться. Но это отдельный вопрос.

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>