java - How to add css-keyframes to vaadin components? -

java - How to add css-keyframes to vaadin components? -

i'd add together keyframe-animation vaadin label component: background should create colored transition red yellow.

but bg color not alter in way. missing anything?

private label label = new label("background reddish fading"); lable.setcss("red");

css:

.v-label-red { @include red; }

keyframe:

@-webkit-keyframes reddish { {background: red;} {background: yellow;} } @keyframes reddish { {background: red;} {background: yellow;} }

be sure have @keyframes out of main @mixin of theme. next .v-label-red needs background set (most same to in keyframes , needs time handle (now goes white -> reddish -> yellowish -> white in no time. here example, should bring on right track:

css

@import "../reindeer/reindeer.scss"; @keyframes keyframe1 { {background: red;} {background: yellow;} } @keyframes keyframe2 { {background: yellow;} {background: red;} } @mixin app { @include reindeer; .keyframe1 { background: yellow; -webkit-animation: keyframe1 1s linear; -moz-animation: keyframe1 1s linear; -ms-animation: keyframe1 1s linear; animation: keyframe1 1s linear; } .keyframe2 { background: red; -webkit-animation: keyframe2 1s linear; -moz-animation: keyframe2 1s linear; -ms-animation: keyframe2 1s linear; animation: keyframe2 1s linear; } }

vaadin ui code (groovy)

@vaadinui @theme('app') @compilestatic class appui extends ui { final static string k1 = 'keyframe1' final static string k2 = 'keyframe2' @override protected void init(vaadinrequest vaadinrequest) { final layout = new verticallayout() layout.setspacing(true) layout.setmargin(true) final headline = new label('hello world') headline.addstylename(k1) final button = new button("toggle", { if (headline.stylename.contains(k1)) { headline.addstylename(k2) headline.removestylename(k1) } else { headline.addstylename(k1) headline.removestylename(k2) } } button.clicklistener) layout.addcomponents(headline, button) setcontent(layout) } }

this code fade label on loading , fade between 2 states on button clicks.

java css vaadin css-animations