Use @keyframes of css with angular 5.2.6

Question

I’m migrating a project and it had some animations. The same goes for animations in css with @keyframes, but putting directly into the component’s css and viewing the generated page from the angular does not work. I took a look at the animations part https://angular.io/guide/animations But I didn’t understand much. This is an example code that I’m trying to migrate to the angular.

p{
text-align:center;
font-size: 1.5em;
}

@keyframes pular {
  0% { transform: scale(1); }
  40% { transform: scale(1.10); }
  50% { transform: scale(1); }
  60% { transform: scale(1.10); }
  70% { transform: scale(1); }
}

.pulso {
  animation-name: pular;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<p class="pulso"> teste <P>

`