Event Timeline with Animation

Event timeline with animation

I've modified your sandbox to make it work:
https://codesandbox.io/s/animable-timeline-reactjs-tiofz

For animation I used following CSS:

div {
  height: 200px;
  width: 10px;
}

.green-progress {
  background: linear-gradient(0, #00a36c, #00a36c) no-repeat, #ccc;
  background-size: 100% 0;
  animation: progressAnim 3s linear infinite forwards;
}

@keyframes progressAnim {
  0% {
    background-size: 100% 0;
  }
  100% {
    background-size: 100% 100%;
  }
}

<div class="green-progress"></div>

jQuery - Event/animation timeline

Given the complex animation behavior you're looking for, I would definately limit rampant callbacks and timeouts.

I would do something like this:

// first define the atomic animation effects

function first_figure_moves_towards_second_figure() {
    // animation calls
}

function first_figure_attacks() {
    // animation calls
}

function second_figure_blocks_attack() {
    // animation calls
}

var animation_script = [
    {
         at_time: 30 * 1000, // 30 seconds
         animation: first_figure_moves_towards_second_figure
    },
    {
         at_time: 31 * 1000, // 31 seconds
         animation: first_figure_attacks
    },
    {
         at_time: 32 * 1000, // 32 seconds
         animation: second_figure_blocks_attack
    }
];

Then have a master function with control of the animation script, like this:

var current_time = 0;

function animate_next() {
    var next = animation_script.shift(),
        time_between = next.at_time - current_time;
    setTimeout(function () {
        current_time = next.at_time;
        next.animation();
        animate_next();
    }, time_between);
}

With this you can define your animations free from a jumble of callbacks, timeouts and intervals - and instead focus on the animation script and the atomic animation building blocks.

Edit after comments:

Note that the names of the functions in the animation script (eg. first_figure_attacks) are function references - stored for later execution. Adding parameters will make them function calls - executing them immediately.

You can use anonymous functions to add parameters like this:

var animation_script = [
    {
        at_time: 5 * 1000,
        animation: function () { doAttack('left', '#char1', '#char2', 2000); }
    }
];

or maybe more aesthetically pleasing, you can wrap doAttack to return a function reference, like this:

function doAttack(side, c1x, c2x, speed) {
    // animation calls
}

function attackAnimation(side, c1x, c2x, speed) {
    return function () {
        doAttack(side, c1x, c2x, speed);
    };
}

var animation_script = [
    {
        at_time: 5 * 1000,
        animation: attackAnimation('left', '#char1', '#char2', 2000)
    }
];

Unity Timeline Animation Event Not Firing

This has been confirmed as a bug in Unity - fixed in 2019.1.

javafx timeline and mouse event

Just create an animation for each circle:

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class GamePractice extends Application {

    private Pane canvas;

    @Override
    public void start(final Stage primaryStage) {

        canvas = new Pane();
        final Scene scene = new Scene(canvas, 800, 600);

        primaryStage.setTitle("Game");
        primaryStage.setScene(scene);
        primaryStage.show();

        addCircle(100, 100, Color.BLUE);

        scene.setOnMousePressed(new EventHandler<MouseEvent>() {         
            @Override         
            public void handle(MouseEvent event) {  
                if (event.getButton() == MouseButton.PRIMARY) {
                    if (!(canvas.getChildren().isEmpty())) {
                        canvas.getChildren().remove(0);
                    }   
                }
                else {
                    int red = (int)(Math.random()*256);
                    int green = (int)(Math.random()*256);
                    int blue = (int)(Math.random()*256);
                    int x = (int)(Math.random()*801);
                    int y = (int)(Math.random()*601);
                    addCircle(x, y, Color.rgb(red, green, blue));
                }
            }     
        }); 

    }

    private void addCircle(double x, double y, Color color) {
        Circle circle = new Circle(15, color);
        circle.relocate(x, y);

        canvas.getChildren().addAll(circle);

        final Timeline loop = new Timeline(new KeyFrame(Duration.millis(10), new EventHandler<ActionEvent>() {

            double deltaX = (double)(Math.random()*10) + 3;
            double deltaY = (double)(Math.random()*10) + 3;

            @Override
            public void handle(final ActionEvent t) {
                circle.setLayoutX(circle.getLayoutX() + deltaX);
                circle.setLayoutY(circle.getLayoutY() + deltaY);

                final Bounds bounds = canvas.getBoundsInLocal();
                final boolean atRightBorder = circle.getLayoutX() >= (bounds.getMaxX() - circle.getRadius());
                final boolean atLeftBorder = circle.getLayoutX() <= (bounds.getMinX() + circle.getRadius());
                final boolean atBottomBorder = circle.getLayoutY() >= (bounds.getMaxY() - circle.getRadius());
                final boolean atTopBorder = circle.getLayoutY() <= (bounds.getMinY() + circle.getRadius());

                if (atRightBorder || atLeftBorder) {
                    deltaX *= -1;
                }
                if (atBottomBorder || atTopBorder) {
                    deltaY *= -1;
                }
            }
        }));

        loop.setCycleCount(Timeline.INDEFINITE);
        loop.play();

    }

    public static void main(final String[] args) {
        launch(args);
    }
}

Event Timeline with Animation