From 64f2a4b6c0ca9e47996ab9bcec05b51d1e1194e4 Mon Sep 17 00:00:00 2001 From: Kishore Subramanian Date: Tue, 20 Mar 2012 09:42:29 -0700 Subject: Animation for the Feed reader --- .../examples/feed-reader/main.reel/main.html | 42 ++++++++++++++++++++-- 1 file changed, 39 insertions(+), 3 deletions(-) (limited to 'node_modules/montage/examples/feed-reader') 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 @@ "name": "FeedReader", "properties": { "element": {"#": "feed-reader"}, - "feedDisplayMode": "timed", - "interval": "5" + "feedDisplayMode": "animation", + "interval": "3" } }, @@ -170,6 +170,7 @@ margin-top: 10px; } + /* .feed-reader .feed-entry { visibility:hidden; @@ -182,7 +183,42 @@ transition-delay:0s; } */ + + @-webkit-keyframes rotateWithAlphaKeyframes { + 0% { + opacity: 0; + -webkit-transform: perspective(1000) rotateY(95deg); + } + 1% { + opacity: 0; + -webkit-transform: perspective(1000) rotateY(-90deg); + } + 15% { + opacity: 1; + -webkit-transform: perspective(1000) rotateY(0deg); + } + 85% { + opacity: 1; + -webkit-transform: perspective(1000) rotateY(0deg); + } + 100% { + opacity: 0; + -webkit-transform: perspective(1000) rotateY(95deg); + } + } + + .rotateWithAlphaAnimation { + -webkit-animation-name: rotateWithAlphaKeyframes; + -webkit-animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-direction: normal; + -webkit-animation-timing-function: ease-out; + -webkit-transform-origin: 200% 50%; + -webkit-transform-style: preserve-3d; + -webkit-transform: perspective(1000); + } + @@ -201,7 +237,7 @@ -
+