Manipulating css with data binding #6274

Hello,

I want to present an idea that came up to me while working on integrating graphic design or UX in the development process and learning angular2.
Im not en experienced web developer (if there is such a thing anymore) I have only created some ionic 1 applications and played with node js as backend.
When I first heard of Angular 2 I was frustrated, why change the good old angular 1? But after a little dive in I think its the best thing that ever happened to me in my programming life, no kidding.
Respect and many thanks to all who are involved in this project.

I was wondering what if I could bind CSS property value to logic? Control the design of my app remotely?
This thought open new interesting directions, from realtime UX updates or allowing the existence of several UXs per application simultaneously, to even gaming development. (imagen what can be done with 3 way css binding with a firebase like service that uses streams over sockets).

The ngClass directive provides a way to control the presence of CSS artributes on a component.
Im asking, why limit the control to predicates? Why not obtaining full control over the CSS properties of an element?

Well I don't know how exactly browsers treats CSS files, but I do know that animations are supported on css3 via the -webkit-transform function. They must manipulate the basic CSS file eventually.
So if I can bind properties to the HTML file why can't I bind properties to the CSS file? The whole components idea is perfect for this with the incapsulation it provides.

I just want to present an idea, this code doesn't suppose to run anywhere so don't be petty about bugs and incorrect syntax. im a fresh developer.
Something like this:

//components.ts
import {Component} from 'angular2/core'
@Component({

    selector: 'animation',
    template:'<button class ="cssClass" (click)="fadeAnimation(100)">{{buttonContent}}</button>', 
    styles:[`
        .cssClass {
            color: rgba(50,50,155,^alpha^) !important;
            }
        `]
})  


export class SomeClass{

   buttonContent: string = 'click me'; 
   alpha: number;

   constructor(){
      this.alpha = 1;
   }

   fadeAnimation: void = (frames) => {
    this.buttonContent = "fading";
    let currentAlpha = this.alpha;
    this.alpha = () => {   
     for(let i=currentAlpha;i>=0;i-=1/frames){
          yield return i;
     }
    }
   }
}

I just want the property 'alpha' in the CSS to be binded to the alpha property in SomeClass just like buttonContent is binded to the HTML template.
Isn't it possible to write some kind of CSS transpiler that will try to resolve the expressions in the CSS file provided by some syntax? (in this case the transpiler will look for ^expression^)

My knowledge on angular2 is not strong enough for me to be able to crate an assessment on how hard it is to build this idea or if there will be a performance impact, I hope this idea is doable with reasonable effort.