Простая анимация ключевых кадров CSS3 не работает в Angular 8

Question

Я создаю веб-сайт после видео Создание адаптивного веб-сайта портфолио . Но в отличие от видео, я использую Angular 8 для создания сайта. Когда я запускаю веб-сайт, я создал отдельный компонент, который представляет собой «лендинг», который содержит мой основной код HTML и стиль CSS. У меня проблема с тем, что я не могу заставить работать анимацию пульса. Я предоставляю файлы html, ts и css.

landing.component. html

<header>
<div class="menu-toggler" (click)="function1()">
<div class="bar half start"></div>
<div class="bar"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav">
<ul class="nav-list">
  <li>
    <a href="#" class="nav-link">Home</a>
  </li>
  <li>
    <a href="#about" class="nav-link">About</a>
  </li>
  <li>
    <a href="#services" class="nav-link">Services</a>
  </li>
  <li>
    <a href="#portfolio" class="nav-link">Portfolio</a>
  </li>
  <li>
    <a href="#experience" class="nav-link">Experience</a>
  </li>
  <li>
    <a href="#contact" class="nav-link">Contact</a>
  </li>
  </ul>
  </nav>
  <div class="landing-text">
  <h1>Suman Paul</h1>
  <h6>UI | UX Designer and Web Developer</h6>
  </div>
  </header>

  <section class="about" id="about">
  <div class="container">
  <div class="profile-img">
  <img src="../../assets/profile.jpeg" alt="">
  </div>
  <div class="about-details">
  <div class="about-heading">
    <h1>About</h1>
    <h6>Myself</h6>
  </div>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo praesentium est nemo labore     sapiente mollitia nam nulla voluptate hic natus dolorum, molestiae nesciunt et eaque aspernatur at maxime, ea sint illum veritatis atque enim ut. Sed tenetur quod provident atque necessitatibus optio placeat omnis repellendus et odio, consectetur facilis tempore. Cumque molestias, doloribus quam officiis repellat eos aliquam fuga animi?</p>
  <div class="social-media">
    <ul class="nav-list">
      <li>
        <a href="#" class="icon-link">
          <i class="fab fa-facebook-square"></i>
        </a>
      </li>
      <li>
        <a href="#" class="icon-link">
          <i class="fab fa-twitter-square"></i>
        </a>
      </li>
      <li>
        <a href="#" class="icon-link">
          <i class="fab fa-dribbble-square"></i>
        </a>
      </li>
    </ul>
  </div>
</div>
</div>
</section>

<section class="services" id="services">
<div class="container">
<div class="section-heading">
  <h1>Services</h1>
  <h6>What I can do for you</h6>
</div>
<div class="my-skills">
  <div class="skill">
    <div class="icon-container">
      <i class="fas fa-layer-group"></i>
    </div>
    <h1>Web Design</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam, perspiciatis?</p>
  </div>
  <div class="skill">
    <div class="icon-container">
      <i class="fas fa-code"></i>
    </div>
    <h1>Web Development</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam, perspiciatis?</p>
  </div>
  <div class="skill">
    <div class="icon-container">
      <i class="fas fa-chart-bar"></i>
    </div>
    <h1>Product Strategy</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam, perspiciatis?</p>
  </div>
</div>
</div>
</section>

<section class="portfolio" id="portfolio">
<div class="container">
<div class="section-heading">
  <h1>Portfolio</h1>
  <h6>View some of my recent work</h6>
</div>
<div class="portfolio-item">
  <div class="portfolio-img has-margin-right">
    <img src="../../assets/portitem1.jpeg" alt="">
  </div>
  <div class="portfolio-description">
    <h6>Web Design</h6>
    <h1>Product Sketch</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
    <a href="#" class="cta">View Details</a>
  </div>
</div>
<div class="portfolio-item">
  <div class="portfolio-description has-margin-right">
    <h6>Web Design</h6>
    <h1>Product Layout</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
    <a href="#" class="cta">View Details</a>
  </div>
  <div class="portfolio-img">
    <img src="../../assets/portitem2.jpeg" alt="">
  </div>
</div>
<div class="portfolio-item">
  <div class="portfolio-img has-margin-right">
    <img src="../../assets/portitem3.jpeg" alt="">
  </div>
  <div class="portfolio-description">
    <h6>Web Design</h6>
    <h1>Product Sketch</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
    <a href="#" class="cta">View Details</a>
  </div>
</div>
</div>
</section>

<section class="experience" id="experience">
<div class="container">
<div class="section-heading">
  <h1>Work Experience</h1>
  <h6>Past and current jobs</h6>
</div>
<div class="timeline">
  <ul>
    <li class="date" data-date="2011 - Present">
      <h1>Google</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
    </li>
    <li class="date" data-date="2008 - 2011">
      <h1>Facebook</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
    </li>
    <li class="date" data-date="2002 - 2007">
      <h1>Microsoft</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
    </li>
  </ul>
</div>
</div>
</section>

<section class="contact" id="contact">
<div class="container">
<div class="section-heading">
  <h1>Contact</h1>
  <h6>Let's work together</h6>
</div>
<form action="">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" placeholder="Enter Your Name" required>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" placeholder="Enter Your Email" required>
  <label for="service">Services:</label>
  <select name="services" id="service">
    <option value="">Web Design</option>
    <option value="">Web Development</option>
    <option value="">Web Design/Development</option>
  </select>
  <label for="subject">Subject:</label>
  <textarea name="subject" id="subject" cols="10" rows="10"></textarea>
  <input type="submit" value="Submit">
</form>
</div>
</section>

<footer class="copyright">
<div class="up" id="up">
<i class="fas fa-chevron-up"></i>
</div>
<p>&copy; 2020 Suman Paul</p>
</footer>

landing.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {

constructor() { }

ngOnInit() {
}

function1(){
let x = document.querySelector('.menu-toggler');
x.classList.toggle('open');
document.querySelector('.top-nav').classList.toggle('open');
}

}

landing.component. css (в конце файла есть анимация, которая не работает)

@import url(//db.onlinewebfonts.com/c/0923ee644c97a87d70269aa80a6f1e79?family=The+Historia+Demo);

.container{
    width: 90% !important;
    max-width: 120rem !important;
    height: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  .section-heading{
    text-align: center !important;
    margin-bottom: 10rem !important;
    color: white !important;
  }

  .section-heading h1{
    font-size: 3.5rem !important;
    color: rgba(255, 255, 255, .3) !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    position: relative !important;
    margin-bottom: 1rem !important;
  }

  .section-heading h1::before,
  .section-heading h2::after{
    content: '' !important;
    position: absolute !important;
    bottom: -0.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: rgba(255, 255, 255, .75) !important;
  }

  .section-heading h1::before{
    width: 10rem !important;
    height: 3px !important;
    border-radius: 0.8rem !important;
  }

  .section-heading h1::after{
    width: 1.5rem !important;
    height: 1.5rem !important;
    border-radius: 100% !important;
    bottom: -1rem !important;
    color: white !important;
  }

  .section-heading h6{
    font-size: 1.6rem !important;
    font-weight: 300 !important;
  }

  .has-margin-right{
    margin-right: 5rem !important;
  }

  header{
    width: 100% !important;
    height: 100vh !important;
  }

  .top-nav{
    width: 100% !important;
    height: 100vh !important;
    top: -100vh !important;
    z-index: 50 !important;
    position: fixed !important;
    background-color: #16162d !important;
    border-bottom-right-radius: 100% !important;
    border-bottom-left-radius: 100% !important;
    transition: all 650ms cubic-bezier(1,0,0,1) !important;
  }

  .nav-list{
    list-style: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  li{
    margin: 0 2rem !important;
  }

  .nav-link{
    font-family: 'The Historia Demo', sans-serif !important;
    font-size: 5rem !important;
    padding: 1rem !important;
  }

  .nav-link:hover,
  .nav-link:focus{
    background: linear-gradient(to top, #ffe838, #fd57bf) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -moz-background-clip: text !important;
    background-clip: text !important;
  }

  .top-nav.open{
    top: 0 !important;
    border-radius: initial !important;
  }

  .menu-toggler{
    position: absolute !important;
    top: 5rem !important;
    right: 5rem !important;
    width: 5rem !important;
    height: 4rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    z-index: 1500 !important;
    transition: transform 650ms ease-out !important;
  }

  .menu-toggler.open{
    transform: rotate(-45deg) !important;
  }

  .bar{
    background: linear-gradient(to right, #ffe838, #fd57bf) !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: .8rem !important;
  }

  .bar.half{
    width: 50% !important;
  }

  .bar.start{
    transform-origin: right !important;
    transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57) !important;
  }

  .open .bar.start{
    transform: rotate(-450deg) translateX(.8rem) !important;
  }

  .bar.end{
    align-self: flex-end !important;
    transform-origin: left !important;
    transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57) !important;
  }

  .open .bar.end{
    transform: rotate(-450deg) translateX(-.8rem) !important;
  }

  .landing-text{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  .landing-text h1{
    font-size: 20rem !important;
    font-family: 'The Historia Demo', sans-serif !important;
    background: linear-gradient(to top, #ffe838, #fd57bf) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -moz-background-clip: text !important;
    background-clip: text !important;
    padding: 1rem !important;
    user-select: none !important;
  }

  .landing-text h6{
    font-size: 2rem !important;
    font-weight: 300 !important;
    color: white !important;
  }

  .about .container{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .about-heading{
    text-align: center !important;
    text-transform: uppercase !important;
    line-height: 0 !important;
    margin-bottom: 6rem !important;
  }

  .about-heading h1{
    font-size: 10rem !important;
    color: white !important;
    opacity: .3 !important;
  }

  .about-heading h6{
    font-size: 2rem !important;
    font-weight: 300 !important;
    color: white !important;
  }

  .profile-img{
    flex: 1 !important;
    margin-right: 5rem !important;
  }

  .about-details{
    flex: 1 !important;
  }

  .social-media{
    margin-top: 5rem !important;
  }

  .social-media i{
    font-size: 5rem !important;
    transition: color 650ms !important;
  }

  .fa-facebook-square:hover{
    color: #4267b2 !important;
  }

  .fa-twitter-square:hover{
    color: #38a1f3 !important;
  }

  .fa-dribbble-square:hover{
    color: #ea4c89 !important;
  }

  .my-skills{
    margin-top: 10rem !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)) !important;
    grid-gap: 2.5rem !important;
    text-align: center !important;
  }

  .skill{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2rem !important;
  }

  .skill h1{
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 2rem-2px 2rem 0 !important;
  }

  .icon-container{
    width: 10rem !important;
    height: 10rem !important;
    border: 3px solid #ffe838 !important;
    background-color: #fd57bf !important;
    margin-bottom: 2rem !important;
    display: flex !important;
    transform: rotate(45deg) !important;
  }

  .icon-container i{
    color: #ffe838 !important;
    font-size: 5rem !important;
    margin: auto !important;
    transform: rotate(-45deg) !important;
  }

  .portfolio-item{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 5rem !important;
  }

  .portfolio-item:last-child{
    margin-bottom: 0 !important;
  }

  .portfolio-img{
    width: 50rem !important;
    flex: 1 !important;
  }

  .portfolio-description{
    flex: 1 !important;
  }

  .portfolio-description h6{
    color: white !important;
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    opacity: 0.3 !important;
  }

  .portfolio-description h1{
    color: white !important;
    font-size: 3rem !important;
    font-weight: 300 !important;
    margin: 1rem 0 !important;
  }

  .portfolio-description .cta{
    display: inline-block !important;
    margin-top: 2.5rem !important;
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    color: #3882ff !important;
    transition: color 650ms !important;
  }

  .portfolio-description .cta:hover{
    color: #2f67cd !important;
  }

  .timeline ul{
    border-left: 4px solid #ffe838 !important;
    border-radius: 0.8rem !important;
    background-color: rgba(0,0,0,0.05) !important;
    margin: 0 auto !important;
    position: relative !important;
    padding: 5rem !important;
    list-style: none !important;
    text-align: left !important;
    width: 70% !important;
  }

  .timeline h1{
    color: white !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    margin-bottom: 1rem !important;
    opacity: 0.3 !important;
  }

  .timeline .date{
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    position: relative !important;
  }

  .timeline .date:last-of-type{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
  }

  .timeline .date::before,
  .timeline .date::after{
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .timeline .date::before{
    content: attr(data-date) !important;
    color: white !important;
    left: -21rem !important;
    text-align: right !important;
    min-width: 12rem !important;
    font-size: 1.5rem !important;
  }

  .timeline .date::after{
    content: '' !important;
    box-shadow: 0 0 0 4px #fd57bf !important;
    border-radius: 100% !important;
    left: -8rem !important;
    height: 1.5rem !important;
    width: 1.5rem !important;
    background-color: #313534 !important;
  }

  .contact{
    background-color: #221e3f !important;
  }

  form{
    width: 70% !important;
    margin: 0 auto !important;
  }

  form label{
    font-size: 1.5rem !important; 
  }

  input,
  select,
  textarea{
    width: 100% !important;
    padding: 1rem !important;
    margin-top: 5px !important;
    border: none !important;
    outline-color: #fd57bf !important;
  }

  input[type="submit"]{
    width: initial !important;
    background-color: #fd57bf !important;
    color: #eee !important;
    padding: 1rem 2rem !important;
    border-radius: 0.8rem !important;
    cursor: pointer !important;
    transition: background-color 650ms !important;
  }

  input[type="submit"]:hover{
    color: #221e3f !important;
    background-color: #ffe838 !important;
  }

  .copyright{
    width: 100% !important;
    text-align: center !important;
    background-color: #16162d !important;
    padding: 2rem 0 !important;
    position: relative !important;
  }

  .up{
    position: absolute !important;
    /* display: inline-block !important; */
    width: 5rem !important;
    height: 5rem !important;
    background-color: #eee !important;
    top: -2.5rem !important;
    right: 5rem !important;
    border-radius: 100% !important;
    display: flex !important;
    animation: pulse 2s infinite !important;
    -moz-animation: pulse 2s infinite !important;    /* Firefox */
    -webkit-animation: pulse 2s infinite !important; /* Safari and Chrome */
    -o-animation: pulse 2s infinite !important;    /* Opera */
    -ms-animation: pulse 2s infinite !important;
  }

  .up i{
    color: #16162d !important;
    font-size: 2rem !important;
    margin: auto !important;
  }

  .copyright p{
    font-size: 1.4rem !important;
  }

  @keyframes pulse{
    0%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0.99) !important;
    }
    70%{
      box-shadow: 0 0 0 2rem rgba(253,87,191,0) !important;
    }
    100%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0) !important;
    }
  }

  @-moz-keyframes pulse{
    0%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0.99) !important;
    }
    70%{
      box-shadow: 0 0 0 2rem rgba(253,87,191,0) !important;
    }
    100%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0) !important;
    }
  }

  @-webkit-keyframes pulse{
    0%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0.99) !important;
    }
    70%{
      box-shadow: 0 0 0 2rem rgba(253,87,191,0) !important;
    }
    100%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0) !important;
    }
  }

  @-o-keyframes pulse{
    0%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0.99) !important;
    }
    70%{
      box-shadow: 0 0 0 2rem rgba(253,87,191,0) !important;
    }
    100%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0) !important;
    }
  }

  @-ms-keyframes pulse{
    0%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0.99) !important;
    }
    70%{
      box-shadow: 0 0 0 2rem rgba(253,87,191,0) !important;
    }
    100%{
      box-shadow: 0 0 0 0 rgba(253,87,191,0) !important;
    }
  }

Может кто-нибудь подсказать, пожалуйста, как я могу решить эту проблему, используя только css анимации а не angular анимации.

PS Я уже установил angular анимации в свой проект