How to add css-keyframes to vaadin components?

Question

I'd like to add a keyframe-animation to a vaadin Label component: the background should make a colored transition from red to yellow.

But the bg color does not change in any way. Am I missing anything?

private Label label = new Label("background red fading");
lable.setCss("red");

css:

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

keyframe:

@-webkit-keyframes red {
    from {background: red;}
    to {background: yellow;}
}
@keyframes red {
    from {background: red;}
    to {background: yellow;}
}

Answer 1

be sure to have the @keyframes out of your main @mixin of the theme. Next your .v-label-red needs the background set (most likely to the same as the to in the keyframes and also it needs some time to handle it (now it basically goes from white -> red -> yellow -> white in no time. here is an example, that should bring you on the right track:

CSS

@import "../reindeer/reindeer.scss";

@keyframes keyframe1 {
    from {background: red;}
    to {background: yellow;}
}
@keyframes keyframe2 {
  from {background: yellow;}
  to {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)
            }
        } as Button.ClickListener)
        layout.addComponents(headline, button)
        setContent(layout)
    }

}

This code will fade the label on loading and will fade between the two states on button clicks.