css анимация не работает (css до и после не работает?)

Question

Я хотел бы включить этот код в свою страницу 404: https://codepen.io/egoregor/pen/Dxtig#code -area Итак, я взял этот код внутри своего 404. php, который находится внутри моей темы ребенка:

<link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>

<div class="glitch" data-text="SRY">404</div> 

Мои полные 404. php:

<?php
get_header();

$prefix = configurator_get_prefix();




//Get Theme Option Value
$configurator_home_btn_text = get_theme_mod( $prefix.'home_btn_text', esc_html__( 'Back to Home', 'configurator' ) );

// check the page builder is be using
if( function_exists( 'kc_is_using' ) && kc_is_using() ) :
    $class = ' container-full';
else :
    $class = ' container';
endif;

if( empty( $class ) ) {
    if ( $configurator_page_layout == 'right-sidebar' || $configurator_page_layout == 'left-sidebar' || $configurator_page_layout == 'right-nav' || $configurator_page_layout == 'left-nav' ) {
        $class = ' container';
    }
}

?>




    <div id="primary" class="content-area">
        <main id="main" class="site-main<?php echo esc_attr( $class ); ?>">

            <article id="post-not-found">
                <header class="article-header">
                    <h1><?php echo esc_html( $configurator_title ); ?></h1>
                    <p><?php echo esc_html( $configurator_sub_title ); ?></p>
                </header>
                <section>
                <link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>

<div class="glitch" data-text="SRY">404</div> 
                    <p class="404-description"><?php echo esc_html( $configurator_description ); ?></p>
                    <p><a href="<?php echo esc_url( home_url( '/' ) ) ?>" class="btn 404-btn"><?php echo esc_html( $configurator_home_btn_text ); ?></a></p>
                </section>
            </article>

        </main>
    </div>
<?php
get_footer();

Стиль детской темы. css:

@import "compass/css3";

.glitch{
  color:red;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:red;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 5s infinite linear alternate-reverse;
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:red;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}

Для стилизации class.glitch внутри css работает нормально, но анимации не вижу. Я пытаюсь понять это так долго, но я не могу это сделать .. Может кто-нибудь помочь мне, пожалуйста?