//HTML - JAVASCRIPT PURO
<script type="text/javascript">
//Obtenes las hojas/reglas/propiedades (podes navegarlas)
    var rule = document.styleSheets[1].cssRules[19];
    var sheet = document.styleSheets[1]
    //console.log(sheet)
    //console.log(rule)

//ejemplo de cambio dinamico (se ejecuta antes de terminar el renderizado de la pagina
    function change(angulo) {
        rule.deleteRule("50%");
        rule.deleteRule("100%");

        var angle1 = Math.floor(Math.random() * (angulo - angulo / 1.2) + angulo / 1.2);
        var angle2 = angulo;
        rule.appendRule("50% { -webkit-transform: rotateX(" + angle1 + "deg);}");
        rule.appendRule("100% { -webkit-transform: rotateX(" + angle2 + "deg);}");
    }
</script>

//ANGULAR
import Keyframes from '@keyframes/core';
//...
constructor(private renderer: Renderer2, private http: HttpClient) {

        angulo = Math.floor(Math.random() * (angulo - angulo / 1.2) + angulo / 1.2);

        Keyframes.define([{
            name: 'x-spin',
            '0%': { transform: 'rotateX(0)' },
            '30%': { transform: 'rotateX(' + angulo / 2 + 'deg)' },
            '100%': { transform: 'rotateX(' + angulo + 'deg)' }
        }]);
    }
//...
ngOnInit(): void {
        const ring = new Keyframes(document.getElementById('ring-1'));
        ring.play(
            'x-spin 4s linear 0s forwards',

        );
        setInterval(function () {
            ring.play(
                'x-spin 4s linear 0s forwards',

            );
        }, 6000);
        console.log(document.body)
    }