Wednesday, November 2, 11
SENCHA ANIMATOR                Arne Bech, Devshi Pindoria, Luca Candela                                 @arnebech,        ...
Sencha AnimatorWednesday, November 2, 11
1k+                            Twitter mentions                            since launch dayWednesday, November 2, 11
Animations everywhereWednesday, November 2, 11
Arne BechWednesday, November 2, 11
CSS3 Transforms                             & AnimationsWednesday, November 2, 11
Transform CSS     Translate/Position     Scale     Rotate     SkewWednesday, November 2, 11
Transform CSS       /* Moves element */       transform: translate(100px, 10px);       /* Scales element */       transfor...
3D Transform CSS       /* Moves element */       transform: translate3d(162px, -29px, 100px);       /* Scales element */  ...
Animations       @keyframes moveLeftThenDown {             0% {                transform: translate3d(0px, 0px, 0px);     ...
Animations       #someElement {             animation-name: moveLeftThenDown;             animation-duration: 5s;         ...
DemoWednesday, November 2, 11
Luca CandelaWednesday, November 2, 11
Sencha AnimatorWednesday, November 2, 11
100% CSS3                            AnimationsWednesday, November 2, 11
Compatible with              most mobile devicesWednesday, November 2, 11
Easy to useWednesday, November 2, 11
Gorgeous UIWednesday, November 2, 11
100% SenchaWednesday, November 2, 11
Thank you!Wednesday, November 2, 11
Upcoming SlideShare
Loading in...5
×

Sencha Animator

1,738

Published on

Sencha Animator is the industry’s leading CSS3 animation tool. With powerful timeline capabilities, interactive editing, rich previews, and a slick interface, designers have never had it easier to build their mobile animations and applications. Animator’s exclusive use of CSS3 lets your imagination go wild with high performance, hardware-accelerated visuals that will dazzle your customers. Attendees in this session will learn how to use and design top-flight animations and walk away mobile animation experts.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,738
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sencha Animator

  1. 1. Wednesday, November 2, 11
  2. 2. SENCHA ANIMATOR Arne Bech, Devshi Pindoria, Luca Candela @arnebech, @devshi @luckymethodWednesday, November 2, 11
  3. 3. Sencha AnimatorWednesday, November 2, 11
  4. 4. 1k+ Twitter mentions since launch dayWednesday, November 2, 11
  5. 5. Animations everywhereWednesday, November 2, 11
  6. 6. Arne BechWednesday, November 2, 11
  7. 7. CSS3 Transforms & AnimationsWednesday, November 2, 11
  8. 8. Transform CSS Translate/Position Scale Rotate SkewWednesday, November 2, 11
  9. 9. Transform CSS /* Moves element */ transform: translate(100px, 10px); /* Scales element */ transform: scale(0.55); /* Rotates element */ transform: rotateZ(11deg); /* Skews element */ transform: skew(15deg, -5deg); /* Multiple functions */ transform: translate(100px, 0) rotateZ(-35deg) scale(0.2,0.4);Wednesday, November 2, 11
  10. 10. 3D Transform CSS /* Moves element */ transform: translate3d(162px, -29px, 100px); /* Scales element */ transform: scale3d(0.55, 0.23, 0.55); /* Rotates element */ transform: rotateZ(11deg) rotateX(23deg) rotateY(-40deg);Wednesday, November 2, 11
  11. 11. Animations @keyframes moveLeftThenDown { 0% { transform: translate3d(0px, 0px, 0px); } 50% { transform: translate3d(100px, 0px, 0px); } 100% { transform: translate3d(100px, 50px, 0px); } }Wednesday, November 2, 11
  12. 12. Animations #someElement { animation-name: moveLeftThenDown; animation-duration: 5s; animation-delay: 2s; animation-fill-mode: both; }Wednesday, November 2, 11
  13. 13. DemoWednesday, November 2, 11
  14. 14. Luca CandelaWednesday, November 2, 11
  15. 15. Sencha AnimatorWednesday, November 2, 11
  16. 16. 100% CSS3 AnimationsWednesday, November 2, 11
  17. 17. Compatible with most mobile devicesWednesday, November 2, 11
  18. 18. Easy to useWednesday, November 2, 11
  19. 19. Gorgeous UIWednesday, November 2, 11
  20. 20. 100% SenchaWednesday, November 2, 11
  21. 21. Thank you!Wednesday, November 2, 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×