Reports

How to Add CSS Transition Effects Using JavaFX 23 and SceneBuilder? JavaFX 23 introduces support for CSS transitions, allowing for smooth animations directly through stylesheets. Since documentation and examples are still sparse, let’s go step by step on how to apply a simple CSS transition, such as changing the background color of a button on hover, using SceneBuilder and FXML.

1. Define Your Scene in FXML In your FXML file, create a button and assign it an ID to reference in the CSS file.

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="sample.Controller">
    <Button text="Hover Me"
            fx:id="animatedButton"
            layoutX="100"
            layoutY="100"
            styleClass="transition-button"/>
</AnchorPane>

2. Apply CSS Transitions Create a styles.css file and define the CSS transitions:

.transition-button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-padding: 10px 20px;
    -fx-font-size: 14px;
    -fx-border-radius: 5px;
    -fx-background-radius: 5px;
    -fx-transition: -fx-background-color 0.5s ease-in-out;
}

.transition-button:hover {
    -fx-background-color: #2ecc71;
}

Explanation:

-fx-transition: -fx-background-color 0.5s ease-in-out;

This applies a smooth transition to the -fx-background-color property. The change takes 0.5 seconds and follows an ease-in-out animation.

.transition-button:hover

When the button is hovered, it smoothly changes from blue (#3498db) to green (#2ecc71).

3. Load the CSS in Java In your JavaFX controller or main application, make sure to load the CSS file.

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
        Parent root = loader.load();
        Scene scene = new Scene(root, 400, 300);

        // Load CSS
        scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

        primaryStage.setTitle("JavaFX CSS Transitions");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Conclusion This method provides a clean and declarative way to add transitions without needing Java animations. SceneBuilder users can apply the CSS class (transition-button) to buttons within SceneBuilder’s StyleClass field.

79423724