I’m following this tutorial: https://www.the-art-of-web.com/css/bouncing-ball-animation/
I put the .css file in the misc folder that came with the starter, and reference it like this: UI.getCurrent().getPage().addStyleSheet(“./styles/misc/bounce.css”);
in the tutorial it says the HTML markup should look like this:
<div id="stage">
<div id="traveler">
<div id="bouncer"><!-- --></div>
</div>
</div>
so I tried this in my class:
public class Probability extends Component {
VerticalLayout content = new VerticalLayout();
public void createBouncingBall() {
UI.getCurrent().getPage().addStyleSheet("styles/misc/bounce.css");
init();
}
public Component init() {
Probability bb = new Probability();
//<div id="stage">
Div stage = new Div();
stage.setId("stage");
//<div id="traveler">
Div traveler = new Div();
traveler.setId("traveler");
stage.add(traveler);
//<div id="bouncer"><!-- --></div>
Div bouncer = new Div();
bouncer.setId("bouncer");
traveler.add(bouncer);
Span span = new Span();
span.setText("<!-- -->");
bouncer.add(span);
content.add(stage,traveler,bouncer);
return content;
}
}
here's the .css:
/* keyframes definition for WebKit browsers */
@-webkit-keyframes travel {
from { left: 0; }
to { left: 640px; }
}
@-webkit-keyframes bounce {
from, to {
bottom: 0;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 220px;
-webkit-animation-timing-function: ease-in;
}
}
@-webkit-keyframes spin {
from { }
to { -webkit-transform: rotateZ(360deg); }
}
/* keyframes definition for other browsers */
@keyframes travel {
from { left: 0; }
to { left: 640px; }
}
@keyframes bounce {
from, to {
bottom: 0;
animation-timing-function: ease-out;
}
50% {
bottom: 220px;
animation-timing-function: ease-in;
}
}
@keyframes spin {
from {
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* styles for the stage and animated elements */
#stage {
position: relative;
margin: 1em auto;
width: 660px;
height: 240px;
border: 2px solid #666;
background: #cff;
}
#traveler {
position: absolute;
width: 20px;
height: 240px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 4.8s;
animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 4.8s;
}
#bouncer {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background: red;
background: -webkit-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
background: -moz-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
background: -o-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
background: -ms-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
background: radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
-webkit-animation-name: bounce, spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4.2s;
animation-name: bounce, spin;
animation-iteration-count: infinite;
animation-duration: 4.2s;
}
and I tried to instantiate the Probability class like this in one of my Views:
private Component createContent() {
FlexBoxLayout content = new FlexBoxLayout(createGrid());
content.setBoxSizing(BoxSizing.BORDER_BOX);
content.setHeightFull();
content.setPadding(Horizontal.RESPONSIVE_X, Top.RESPONSIVE_X);
Probability bb = new Probability();
bb.createBouncingBall();
content.add(bb);
return content;
}
When I load the page, the Main Layout is there, but there is no bouncing ball, and the source doesn’t show any reference to the css file. What am I missing? I’m brand new to Vaadin, so none of this is making much sense at the moment.