Ensure that the @keyframes are not within your main @mixin of the theme. Additionally, your .v-label-red should have the background set (likely to the same as the to in the keyframes) and it needs some time to transition smoothly. Currently, it quickly shifts from white to red to yellow to white. Here is an example to guide you:
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 piece of code will create a fading effect on the label when loading and smoothly transition between two states upon button clicks.