Hummingbird supports CSS3 animations. They provide a powerful framework to describe complex animations over many element properties as well as their easing methods.

 /* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

The Adobe Animate plug-in is a great way to animate elements in your UI. It automatically generates CSS3 animations from the visual timeline.

Additional resources are available here:

Additionally JavaScript code can be used to animate styles of elements. When possible, prefer CSS3 animations as they are evaluated in C++ and are significantly faster performance-wise.

Web Animations API

Hummingbird also supports a subset of the Web Animations API and gives low-level control over animations from JavaScript.

The developer can access the Animations of a DOM node through the Node.getAnimations() method, which returns and array of all animations that are resolved for this element.

Developers can use methods like play, pause, playFromTo and attributes like currentTime to control the playback. playFromTo is a specific Hummingbird-only API that extends the Web Animations to give easier control to UI developers. The signature of the method is playFromTo(startTimeMs, pauseTimeMs). When called, the animation will seek to startTimeMs and pause when it reaches pauseTimeMs. Both units are in milliseconds counted from the beginning of the animation. Calling play, pause or any other control API while the animation hasn't reached it's pauseTimeMs will cancel the scheduled pause.

Complex Animations

The Hummingbird's implementation of the Web Animations API provides a great and easy way to add playback control to animations, but it doesn't have any functionalities, which enable the creation of more complex animations. CSS animations should always be the preferred choice over JavaScript animations, because CSS animations are faster, as they are evaluated in C++. There are plenty of JavaScript libraries, which can be used for the creation of complex CSS animations. As of version 1.13 Hummingbird supports Anime.js. It is a lightweight JavaScript animation library, which works with any CSS Properties. Developers should keep in mind, that some of the examples on the documentation page of Anime.js will not work in Hummingbird, as they use some unsupported HTML and CSS features. However, there are working alternatives to the unsupported features. The following list should be used to replace the unsupported features with the working alternatives in Hummingbird:

Unsupported	Alternative
HTML pre tag	HTML span tag
rad unit	deg
grad unit	deg

SVG animations, using Anime.js are not supported.