I recently implemented Angular universal into my application by following the step-by-step guide provided at https://angular.io/guide/universal. While the process itself was straightforward, I am currently facing a challenge with the following error:
ERROR Error: Unable to build the animation due to the following errors: The provided animation property "transform" is not a supported CSS property for animations The provided animation property "transform" is not a supported CSS property for animations
This issue seems to stem from a simple button that utilizes a keyframe animation featuring transform: rotate(0deg). The button, which has a circular shape, should roll from right to left upon loading.
Is there a workaround available to resolve this problem? I strongly believe that 'transform' is indeed a valid CSS property for animations.
Edit: Within a component's SCSS file, I have utilized the transform Property. This component displays static content and represents an entire webpage. The CSS code snippet in question is as follows:
.roll-in {
animation: 2s linear 0s 1 animation;
animation-fill-mode: both;
}
@keyframes animation {
0% {
left: 110%;
}
10% {
transform: rotate(0deg);
left: 110%;
}
100% {
transform: rotate(-720deg);
left: 0px;
}
}
Upon running the application using serve:ssr, the element appears to lack the animation attribute.