CSS2WAA/sample.js at master · zivpug/CSS2WAA · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const {css2waa, waa2css} = require('./lib/');

/** CSS keyframes to WAA Object **/
const myCssKeyframes = `@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }

  50% {
    margin-left:50%;
    width:200%
  }

  to {
    margin-left:0%;
    width:100%;
  }
}`

// const WAAOptions = {
//     duration: 2000,
//     delay: 1000
// }

const myWAAAnimation = css2waa(myCssKeyframes);
console.log(myWAAAnimation);

/** Use like this:
 document.getElementById('myId').animate(myWAAAnimation, WAAOptions);
 **/


/** WAA object to CSS keyframes **/

const myWaaAnimation = [
    {
        "offset": 0,
        "margin-left": "100%",
        "width": "300%"
    },
    {
        "offset": 0.5,
        "margin-left": "50%",
        "width": "200%"
    },
    {
        "offset": 1,
        "margin-left": "0%",
        "width": "100%"
    }
]

const myCssKeyframesString = waa2css(myWaaAnimation);
/**
 use in your css - "`@keyframes myKeyframes{${myCssKeyframesString}}`"
 * **/

console.log(myCssKeyframesString);