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