aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/examples
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/examples')
-rw-r--r--node_modules/montage/examples/feed-reader/main.reel/main.html42
1 files changed, 39 insertions, 3 deletions
diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.html b/node_modules/montage/examples/feed-reader/main.reel/main.html
index 50bac601..1313219f 100644
--- a/node_modules/montage/examples/feed-reader/main.reel/main.html
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.html
@@ -45,8 +45,8 @@
45 "name": "FeedReader", 45 "name": "FeedReader",
46 "properties": { 46 "properties": {
47 "element": {"#": "feed-reader"}, 47 "element": {"#": "feed-reader"},
48 "feedDisplayMode": "timed", 48 "feedDisplayMode": "animation",
49 "interval": "5" 49 "interval": "3"
50 } 50 }
51 }, 51 },
52 52
@@ -170,6 +170,7 @@
170 margin-top: 10px; 170 margin-top: 10px;
171 } 171 }
172 172
173
173 /* 174 /*
174 .feed-reader .feed-entry { 175 .feed-reader .feed-entry {
175 visibility:hidden; 176 visibility:hidden;
@@ -182,7 +183,42 @@
182 transition-delay:0s; 183 transition-delay:0s;
183 } 184 }
184 */ 185 */
186
187 @-webkit-keyframes rotateWithAlphaKeyframes {
188 0% {
189 opacity: 0;
190 -webkit-transform: perspective(1000) rotateY(95deg);
191 }
192 1% {
193 opacity: 0;
194 -webkit-transform: perspective(1000) rotateY(-90deg);
195 }
196 15% {
197 opacity: 1;
198 -webkit-transform: perspective(1000) rotateY(0deg);
199 }
200 85% {
201 opacity: 1;
202 -webkit-transform: perspective(1000) rotateY(0deg);
203 }
204 100% {
205 opacity: 0;
206 -webkit-transform: perspective(1000) rotateY(95deg);
207 }
208 }
209
210 .rotateWithAlphaAnimation {
211 -webkit-animation-name: rotateWithAlphaKeyframes;
212 -webkit-animation-duration: 5s;
213 -webkit-animation-iteration-count: infinite;
214 -webkit-animation-direction: normal;
215 -webkit-animation-timing-function: ease-out;
216 -webkit-transform-origin: 200% 50%;
217 -webkit-transform-style: preserve-3d;
218 -webkit-transform: perspective(1000);
219 }
185 220
221
186 </style> 222 </style>
187 223
188 224
@@ -201,7 +237,7 @@
201 <input type="button" id="btn-go" class="btn primary" value="OK"></button> 237 <input type="button" id="btn-go" class="btn primary" value="OK"></button>
202 </form> 238 </form>
203 </div> 239 </div>
204 <div class="feed-reader" id="feed-reader"></div> 240 <div class="feed-reader rotateWithAlphaAnimation" id="feed-reader" ></div>
205 </section> 241 </section>
206 242
207 <section class="map-container"> 243 <section class="map-container">