aboutsummaryrefslogtreecommitdiff
path: root/js/panels/presets/default-animation-presets.js
blob: 0730c2ef57672cd1d2722325c35695a12a686182 (plain)
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
/* <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */

exports.animationPresets = {
    "text": "Animation Presets Library",
    "children": [{
        "text": "Border Animations",
        "children": [
            {
                "text": "Border Morph",
                "selectorBase" : "border-morph",
                "rules" : [{
                    "selectorSuffix" : "",
                    "styles" : {
                        "-webkit-animation": "border-morph 2s infinite"
                    }
                },
                    {
                        "isKeyFrameRule": true,
                        "keys" : [{
                            "keyText": "0%",
                            "styles": { "border-radius": "0" }
                        }, {
                            "keyText": "50%",
                            "styles": {
                                "border-radius": "100%"
                            }
                        }, {
                            "keyText": "100%",
                            "styles": {
                                "border-radius": "0%"
                            }
                        }]
                    }]
            }]
    }, {
        "text": "3D Animations",
    "children": [
        {
            "text": "Slide Out with Fade",
            "selectorBase": "slide-fade-out",
            "rules" : [{
                "selectorSuffix" : "",
                "styles" : {
                    "-webkit-animation-name": "slide-fade-out",
                    "-webkit-animation-duration": "5s",
                    "-webkit-animation-iteration-count": "infinite",
                    "-webkit-animation-direction": "normal",
                    "-webkit-animation-timing-function": "ease",
                    "-webkit-transform-style": "preserve-3d",
                    "-webkit-transform": "perspective(1000)",
                    "-webkit-animation-delay": "0s"
                }
            },{
                "isKeyFrameRule": true,
                "keys" : [{
                    "keyText": "0%",
                    "styles": {
                        "opacity": "0",
                        "-webkit-transform": "translate3d(0, 0, 0)"
                    }
                }, {
                    "keyText": "10%",
                    "styles": {
                        "opacity": "1",
                        "-webkit-transform": "translate3d(0, 0, 0)"
                    }
                }, {
                    "keyText": "86%",
                    "styles": {
                        "opacity": "1",
                        "-webkit-transform": "translate3d(0, 0, 0)"

                    }
                }, {
                    "keyText": "100%",
                    "styles": {
                        "opacity": "0",
                        "-webkit-transform": "translate3d(540px, 0, 0)"
                    }
                }]
            }]
        }]
    }, {
        "text": "3D Animations",
        "children": [
            {
                "text": "Rotater",
                "selectorBase" : "rotate-with-alpha-keyframes",
                "rules" : [{
                    "selectorSuffix" : "",
                    "styles" : {
                        "-webkit-animation-name": "rotate-with-alpha-keyframes",
                        "-webkit-animation-duration": "5s",
                        "-webkit-animation-iteration-count": "infinite",
                        "-webkit-animation-direction": "normal",
                        "-webkit-animation-timing-function": "ease-out",
                        "-webkit-transform-origin": "100% 50%",
                        "-webkit-transform-style": "preserve-3d",
                        "-webkit-transform": "perspective(1000)",
                        "-webkit-animation-delay": "0s"
                    }
                },{
                    "isKeyFrameRule": true,
                    "keys" : [{
                        "keyText": "0%",
                        "styles": {
                            "opacity": "1",
                            "-webkit-transform": "perspective(1000) rotateY(0deg)"
                        }
                    }, {
                        "keyText": "70%",
                        "styles": {
                            "opacity": "1",
                            "-webkit-transform": "perspective(1000) rotateY(0deg)"
                        }
                    }, {
                        "keyText": "85%",
                        "styles": {
                            "opacity": "0",
                            "-webkit-transform": "perspective(1000) rotateY(95deg)"
                        }
                    }, {
                        "keyText": "86%",
                        "styles": {
                            "opacity": "0",
                            "-webkit-transform": "perspective(1000) rotateY(-90deg)"
                        }
                    }, {
                        "keyText": "100%",
                        "styles": {
                            "opacity": "1",
                            "-webkit-transform": "perspective(1000) rotateY(0deg)"
                        }
                    }]
                }]
            },
            {
                "text": "Rotate with Fade In",
                "selectorBase" : "rotate-with-fade-in",
                "rules" : [{
                    "selectorSuffix" : "",
                    "styles" : {
                        "-webkit-animation-name": "rotate-with-fade-in",
                        "-webkit-animation-duration": "5s",
                        "-webkit-animation-iteration-count": "infinite",
                        "-webkit-animation-direction": "normal",
                        "-webkit-animation-timing-function": "ease-out",
                        "-webkit-transform-origin": "100% 50%",
                        "-webkit-transform-style": "preserve-3d",
                        "-webkit-transform": "perspective(1000)",
                        "-webkit-animation-delay": "0s"
                    }
                },{
                    "isKeyFrameRule": true,
                    "keys" : [{
                        "keyText": "0%",
                        "styles": {
                            "opacity": "0",
                            "-webkit-transform": "perspective(1000) rotateY(-90deg)"
                        }
                    }, {
                        "keyText": "15%",
                        "styles": {
                            "opacity": "1",
                            "-webkit-transform": "perspective(1000) rotateY(0deg)"
                        }
                    }, {
                        "keyText": "85%",
                        "styles": {
                            "opacity": "1",
                            "-webkit-transform": "perspective(1000) rotateY(0deg)"
                        }
                    }, {
                        "keyText": "100%",
                        "styles": {
                            "opacity": "0",
                            "-webkit-transform": "perspective(1000) rotateY(95deg)"
                        }
                    }]
                }]
            }]
    }]
};