带有动画条纹的ProgressBar

Question

我想像这个例子一样创建动画ProgressBar：

https://developer.mozilla.org/en-US/demos/detail/pure-css-progress-bar-animated-by-css3/launch

http://sarahjustine.com/2013/03/24/animated-progress-bars-with-css3-2/

我找到的最好的例子是：

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 * Displays progress on a striped progress bar
 */
public class MainApp extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }

    @Override
    public void start(final Stage stage)
    {
        ProgressBar bar = new ProgressBar(0);
        bar.setPrefSize(200, 24);

        final Timeline task = new Timeline(
            new KeyFrame(
                Duration.ZERO,
                new KeyValue(bar.progressProperty(), 0)
            ),
            new KeyFrame(
                Duration.seconds(2),
                new KeyValue(bar.progressProperty(), 1)
            )
        );

        Button button = new Button("Go!");
        button.setOnAction(new EventHandler<ActionEvent>()
        {
            @Override
            public void handle(ActionEvent actionEvent)
            {
                task.playFromStart();
            }
        });

        VBox layout = new VBox(10);
        layout.getChildren().setAll(
            bar,
            button
        );
        layout.setPadding(new Insets(10));
        layout.setAlignment(Pos.CENTER);

        layout.getStylesheets().add(
            getClass().getResource(
                "/styles/striped-progress.css"
            ).toExternalForm()
        );

        stage.setScene(new Scene(layout));
        stage.show();
    }
}

CSS：

.progress-bar > .bar {
-fx-background-color: linear-gradient(
from 0px .75em to .75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}

不幸的是，我不知道如何添加动画效果，这会使进度条移动。你能帮忙添加这个效果吗？