Directory

← Back

Animate-CSS

Animate.CSS : Just-add-water CSS animations

Author

Rating

Popularity

200+

A cross-browser library of CSS animations. As easy to use as an easy thing. See http://daneden.github.io/animate.css .

Vaadin Flow version.

Sample code

package com.infraleap.vaadin;

import com.infraleap.animatecss.Animated;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

/**
 * The main view contains a button and a click listener.
 */
@Route("")
public class MainView extends VerticalLayout implements Animated {

    public MainView() {

        this.animate(Animation.BOUNCE_IN_LEFT);

        Button button = new Button("Click me",
                event -> Notification.show("Clicked!"));
        add(button);
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Another small API extension, so that not only to HasStyle but also to HasElement animations can be applied.

Released
2020-10-11
Maturity
STABLE
License
MIT License

Compatibility

Framework
Vaadin 10+
Vaadin 13+ in 1.0.1
Vaadin 14+ in 2.0.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Windows Phone
Microsoft Edge

Animate-CSS - Vaadin Add-on Directory

Animate.CSS : Just-add-water CSS animations Animate-CSS - Vaadin Add-on Directory
A cross-browser library of CSS animations. As easy to use as an easy thing. See http://daneden.github.io/animate.css . Vaadin Flow version.
View on GitHub
Online Demo, showing the effects included

Animate-CSS version 1.0
Initial Version.

Animate-CSS version 1.0.1
removed a tiny remnant from experimenting: color red by default.

Animate-CSS version 2.0.0
This version adds support for Vaadin 14+ in native NPM mode. Also the API was slightly extended for modifiers, such as DELAY_3S (three seconds delay) or INFINITE (animate forever).

Animate-CSS version 2.0.1
API extensions so you don't need to inherit the Animated interface any more.

Animate-CSS version 2.0.2
Another small API extension, so that not only to HasStyle but also to HasElement animations can be applied.

Online