diff options
Diffstat (limited to 'js/panels/presets/default-animation-presets.js')
| -rw-r--r-- | js/panels/presets/default-animation-presets.js | 125 |
1 files changed, 109 insertions, 16 deletions
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 10a3e906..64f91ea6 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js | |||
| @@ -18,24 +18,72 @@ exports.animationPresets = { | |||
| 18 | "-webkit-animation": "border-morph 2s infinite" | 18 | "-webkit-animation": "border-morph 2s infinite" |
| 19 | } | 19 | } |
| 20 | }, | 20 | }, |
| 21 | { | 21 | { |
| 22 | "isKeyFrameRule": true, | 22 | "isKeyFrameRule": true, |
| 23 | "keys" : [{ | 23 | "keys" : [{ |
| 24 | "keyText": "0%", | 24 | "keyText": "0%", |
| 25 | "styles": { "border-radius": "0" } | 25 | "styles": { "border-radius": "0" } |
| 26 | }, { | 26 | }, { |
| 27 | "keyText": "50%", | 27 | "keyText": "50%", |
| 28 | "styles": { | 28 | "styles": { |
| 29 | "border-radius": "100%" | 29 | "border-radius": "100%" |
| 30 | } | 30 | } |
| 31 | }, { | 31 | }, { |
| 32 | "keyText": "100%", | 32 | "keyText": "100%", |
| 33 | "styles": { | 33 | "styles": { |
| 34 | "border-radius": "0%" | 34 | "border-radius": "0%" |
| 35 | } | 35 | } |
| 36 | }] | ||
| 36 | }] | 37 | }] |
| 38 | }] | ||
| 39 | }, { | ||
| 40 | "text": "2D Animations", | ||
| 41 | "children": [ | ||
| 42 | { | ||
| 43 | "text": "Slide Out with Fade", | ||
| 44 | "selectorBase": "slide-fade-out", | ||
| 45 | "rules" : [{ | ||
| 46 | "selectorSuffix" : "", | ||
| 47 | "styles" : { | ||
| 48 | "-webkit-animation-name": "slide-fade-out", | ||
| 49 | "-webkit-animation-duration": "5s", | ||
| 50 | "-webkit-animation-iteration-count": "infinite", | ||
| 51 | "-webkit-animation-direction": "normal", | ||
| 52 | "-webkit-animation-timing-function": "ease", | ||
| 53 | "-webkit-transform-style": "preserve-3d", | ||
| 54 | "-webkit-transform": "perspective(1000)", | ||
| 55 | "-webkit-animation-delay": "0s" | ||
| 56 | } | ||
| 57 | },{ | ||
| 58 | "isKeyFrameRule": true, | ||
| 59 | "keys" : [{ | ||
| 60 | "keyText": "0%", | ||
| 61 | "styles": { | ||
| 62 | "opacity": "0", | ||
| 63 | "-webkit-transform": "translate3d(0, 0, 0)" | ||
| 64 | } | ||
| 65 | }, { | ||
| 66 | "keyText": "10%", | ||
| 67 | "styles": { | ||
| 68 | "opacity": "1", | ||
| 69 | "-webkit-transform": "translate3d(0, 0, 0)" | ||
| 70 | } | ||
| 71 | }, { | ||
| 72 | "keyText": "86%", | ||
| 73 | "styles": { | ||
| 74 | "opacity": "1", | ||
| 75 | "-webkit-transform": "translate3d(0, 0, 0)" | ||
| 76 | |||
| 77 | } | ||
| 78 | }, { | ||
| 79 | "keyText": "100%", | ||
| 80 | "styles": { | ||
| 81 | "opacity": "0", | ||
| 82 | "-webkit-transform": "translate3d(540px, 0, 0)" | ||
| 83 | } | ||
| 37 | }] | 84 | }] |
| 38 | }] | 85 | }] |
| 86 | }] | ||
| 39 | }, { | 87 | }, { |
| 40 | "text": "3D Animations", | 88 | "text": "3D Animations", |
| 41 | "children": [ | 89 | "children": [ |
| @@ -50,7 +98,7 @@ exports.animationPresets = { | |||
| 50 | "-webkit-animation-iteration-count": "infinite", | 98 | "-webkit-animation-iteration-count": "infinite", |
| 51 | "-webkit-animation-direction": "normal", | 99 | "-webkit-animation-direction": "normal", |
| 52 | "-webkit-animation-timing-function": "ease-out", | 100 | "-webkit-animation-timing-function": "ease-out", |
| 53 | "-webkit-transform-origin": "200% 50%", | 101 | "-webkit-transform-origin": "100% 50%", |
| 54 | "-webkit-transform-style": "preserve-3d", | 102 | "-webkit-transform-style": "preserve-3d", |
| 55 | "-webkit-transform": "perspective(1000)", | 103 | "-webkit-transform": "perspective(1000)", |
| 56 | "-webkit-animation-delay": "0s" | 104 | "-webkit-animation-delay": "0s" |
| @@ -89,6 +137,51 @@ exports.animationPresets = { | |||
| 89 | } | 137 | } |
| 90 | }] | 138 | }] |
| 91 | }] | 139 | }] |
| 140 | }, | ||
| 141 | { | ||
| 142 | "text": "Rotate with Fade In", | ||
| 143 | "selectorBase" : "rotate-with-fade-in", | ||
| 144 | "rules" : [{ | ||
| 145 | "selectorSuffix" : "", | ||
| 146 | "styles" : { | ||
| 147 | "-webkit-animation-name": "rotate-with-fade-in", | ||
| 148 | "-webkit-animation-duration": "5s", | ||
| 149 | "-webkit-animation-iteration-count": "infinite", | ||
| 150 | "-webkit-animation-direction": "normal", | ||
| 151 | "-webkit-animation-timing-function": "ease-out", | ||
| 152 | "-webkit-transform-origin": "100% 50%", | ||
| 153 | "-webkit-transform-style": "preserve-3d", | ||
| 154 | "-webkit-transform": "perspective(1000)", | ||
| 155 | "-webkit-animation-delay": "0s" | ||
| 156 | } | ||
| 157 | },{ | ||
| 158 | "isKeyFrameRule": true, | ||
| 159 | "keys" : [{ | ||
| 160 | "keyText": "0%", | ||
| 161 | "styles": { | ||
| 162 | "opacity": "0", | ||
| 163 | "-webkit-transform": "perspective(1000) rotateY(-90deg)" | ||
| 164 | } | ||
| 165 | }, { | ||
| 166 | "keyText": "15%", | ||
| 167 | "styles": { | ||
| 168 | "opacity": "1", | ||
| 169 | "-webkit-transform": "perspective(1000) rotateY(0deg)" | ||
| 170 | } | ||
| 171 | }, { | ||
| 172 | "keyText": "85%", | ||
| 173 | "styles": { | ||
| 174 | "opacity": "1", | ||
| 175 | "-webkit-transform": "perspective(1000) rotateY(0deg)" | ||
| 176 | } | ||
| 177 | }, { | ||
| 178 | "keyText": "100%", | ||
| 179 | "styles": { | ||
| 180 | "opacity": "0", | ||
| 181 | "-webkit-transform": "perspective(1000) rotateY(95deg)" | ||
| 182 | } | ||
| 183 | }] | ||
| 184 | }] | ||
| 92 | }] | 185 | }] |
| 93 | }] | 186 | }] |
| 94 | }; \ No newline at end of file | 187 | }; \ No newline at end of file |