diff options
author | Kishore Subramanian | 2012-03-20 09:42:29 -0700 |
---|---|---|
committer | Kishore Subramanian | 2012-03-20 09:43:13 -0700 |
commit | 64f2a4b6c0ca9e47996ab9bcec05b51d1e1194e4 (patch) | |
tree | 9bf6bc42f6a2bacc14f886d5a5c231cec1656eac /node_modules/montage/examples/feed-reader/main.reel/main.html | |
parent | ab7c54f28151e5ae485881ec53ba22718ff4b449 (diff) | |
download | ninja-64f2a4b6c0ca9e47996ab9bcec05b51d1e1194e4.tar.gz |
Animation for the Feed reader
Diffstat (limited to 'node_modules/montage/examples/feed-reader/main.reel/main.html')
-rw-r--r-- | node_modules/montage/examples/feed-reader/main.reel/main.html | 42 |
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"> |