From 545741772d8cec25866482953df8fbc3a52f8cf0 Mon Sep 17 00:00:00 2001 From: chrisdavidmills Date: Tue, 16 May 2017 11:36:18 +0100 Subject: [PATCH] adding web animations api version --- README.md | 2 +- .../index-waa.html | 58 +++++++++++++++++++ 2 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 animation-frames-timing-function/index-waa.html diff --git a/README.md b/README.md index cc0d7f58..b5936f4e 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This repository contains examples of CSS usage. -The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the step() timing function available for CSS animations and transitions, and the new frames() timing function. [Run the example live](http://mdn.github.io/css-examples/animation-frames-timing-function/). You can also find a version that shows the [same timing function used with transitions](http://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html). +The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the steps() timing function available for CSS animations and transitions, and the new frames() timing function. [Run the example live](http://mdn.github.io/css-examples/animation-frames-timing-function/). You can also find versions that show the same timing function [used with transitions](http://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html), and used with the [Web Animations API](http://mdn.github.io/css-examples/animation-frames-timing-function/index-waa.html). The "counter-style-demo" directory contains a demo for the [@counter-style documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style). See the live demo [here](https://mdn.github.io/css-examples/counter-style-demo/). diff --git a/animation-frames-timing-function/index-waa.html b/animation-frames-timing-function/index-waa.html new file mode 100644 index 00000000..d7f989f6 --- /dev/null +++ b/animation-frames-timing-function/index-waa.html @@ -0,0 +1,58 @@ + + + + + Web animations API frames example + + + +

transition-timing-function: frames(10)

+

transition-timing-function: steps(10);

+

transition-timing-function: ease-in;

+ + + +