Web Animations API

CSS3 Animations

<style>
.square {
    width: 100px;
    height: 100px;
    background-color: red;
}

.square.animated {
    animation: backgroud-color-animation 1s;
}

@keyframes backgroud-color-animation {
    from {background-color: red;}
    to {background-color: yellow;}
}
</style>
<div class="square animated">
</div>

How to control it?

Web Animations API

The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements.

Mozilla Developer network

Can I use it?

Welcome Polyfill

https://github.com/web-animations/web-animations-js

Demo Time

Alternatives

requestAnimationFrame()

Canvas

WebGL

Performance

https://mozdevs.github.io/Animation-examples/

That's It!

f.strazzullo@e-xtrategy.net

@TheStrazz86

https://github.com/e-xtrategy/web-animations-api-examples

Thanks!