Как заставить анимацию работать на определенной странице в WordPress

Question

У меня есть следующие HTML и CSS для анимации страницы контакта:

page-id-1239 {
  background: #000;
  display: flex;
  align- items: center;
  height: 100vh;
  justify-content: center;
}

.contact {
  font-family: arial;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 7rem;
  max-width: 1200px;
  margin: 0 auto;
}

.contact::before .contact::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact::before {
  left: 2px;
  clip: rect(79px, 1200px, 86px, 0);
  text-shadow: -1px 0 red;
  background: #000;
  animation: brasil-anim-2 1s infinite linear alternate- reverse;
}

.contact:after {
  left: -2px;
  clip: rect(79px, 1200px, 86px, 0);
  text-shadow: -1px 0 blue 000;
  animation: brasil-anim-1 1s infinite linear alternate- reverse;
  Animation-delay: -1s;
}

@keyframes brasil-anim-1 {
  0% {
    Clip: rect(20px, 1200px, 76px, 0);
  }
  20% {
    Clip: rect(19px, 1200px, 16px, 0);
  }
  40% {
    Clip: rect(16px, 1200px, 3px, 0);
  }
  60% {
    Clip: rect(62px, 1200px, 78px, 0);
  }
  80% {
    Clip: rect(25px, 1200px, 13px, 0);
  }
  100% {
    Clip: rect(53px, 1200px, 86px, 0);
  }
}

@keyframes brasil-anim-2 {
  0% {
    Clip: rect(79px, 1200px, 86px, 0);
  }
  20% {
    Clip: rect(20px, 1200px, 30px, 0)
  }
  40% {
    Clip: rect(25px, 1200px, 5px, 0)
  }
  60% {
    Clip: rect(65px, 1200px, 85px
  }
  80% {
    Clip: rect(120px, 1200px, 145px, 0)
  }
  100% {
    clip: rect(95px, 1200px, 75px, 0)
  }
}

<div class="contact" data
text="CONTACT">CONTACT</div>

Это должно создать анимацию, в которой слово contact мерцает, как неисправный телевизор.Фон должен быть белым, а текст - черным с полосой или экраном, который перемещается вверх и вниз по слову, чтобы скрыть и показать его.

Проблема 1. Не работает, почему?

Проблема 2: Когда я начинаю с body, это портит весь мой сайт.Когда я начинаю с page-id-1239, он ничего не делает.

Answer 1

Обновление

После просмотра вашего сайта добавьте следующую строку:

.contact {
  …
  line-height: 2;
}

---

Проблема 1: Почему это не работает?

Была проблема в том, как вы называли анимацию.

• неправильная стенография alternate- reverse. Вы должны убрать пробел между тире и 'r' из 'reverse'

Было также несколько других опечаток, но ничто не мешало анимации работать.

.page-id-1239 {
  background: #000;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}

.contact {
  font-family: arial;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 7rem;
  max-width: 1200px;
  margin: 0 auto;
}

.contact::before,
.contact::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact::before {
  left: 2px;
  clip: rect(79px, 1200px, 86px, 0);
  text-shadow: -1px 0 red;
  background: #000;
  animation: brasil-anim-2 1s infinite linear alternate-reverse;
}

.contact:after {
  left: -2px;
  clip: rect(79px, 1200px, 86px, 0);
  text-shadow: -1px 0 blue 000;
  animation: brasil-anim-1 1s infinite linear alternate-reverse;
  animation-delay: -1s;
}

@keyframes brasil-anim-1 {
  0% {
    clip: rect(20px, 1200px, 76px, 0);
  }
  20% {
    clip: rect(19px, 1200px, 16px, 0);
  }
  40% {
    clip: rect(16px, 1200px, 3px, 0);
  }
  60% {
    clip: rect(62px, 1200px, 78px, 0);
  }
  80% {
    clip: rect(25px, 1200px, 13px, 0);
  }
  100% {
    clip: rect(53px, 1200px, 86px, 0);
  }
}

@keyframes brasil-anim-2 {
  0% {
    clip: rect(79px, 1200px, 86px, 0);
  }
  20% {
    clip: rect(20px, 1200px, 30px, 0);
  }
  40% {
    clip: rect(25px, 1200px, 5px, 0);
  }
  60% {
    clip: rect(65px, 1200px, 85px);
  }
  80% {
    clip: rect(120px, 1200px, 145px, 0);
  }
  100% {
    clip: rect(95px, 1200px, 75px, 0);
  }
}

<div class="contact" data-text="CONTACT">CONTACT</div>

Проблема 2: Когда я начинаю с тела, оно портит весь мой сайт. Когда я начинаю с page-id-1239, он ничего не делает.

То, что вы включили, не является допустимым CSS селектором. Вам необходимо поставить перед ним префикс с точкой . или знаком фунта #, чтобы обозначить class или id соответственно.

page-id-1239 { … }