The document discusses Sencha Animator, a new tool for creating CSS3 animations. It was introduced by Arne Bech, Devshi Pindoria, and Luca Candela. Sencha Animator allows creating animations using only CSS3 transforms and animations, works on most mobile devices, and has an easy-to-use interface. It produces high-quality animations while being fully integrated with Sencha technologies.

1. Wednesday, November 2, 11

2. SENCHA ANIMATOR
Arne Bech, Devshi Pindoria, Luca Candela
@arnebech,
@devshi
@luckymethod
Wednesday, November 2, 11

3. Sencha Animator
Wednesday, November 2, 11

4. 1k+
Twitter mentions
since launch day
Wednesday, November 2, 11

5. Animations everywhere
Wednesday, November 2, 11

6. Arne Bech
Wednesday, November 2, 11

7. CSS3 Transforms
& Animations
Wednesday, November 2, 11

8. Transform CSS
Translate/Position
Scale
Rotate
Skew
Wednesday, November 2, 11

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. 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. 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. Animations
#someElement {
animation-name: moveLeftThenDown;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: both;
}
Wednesday, November 2, 11

13. Demo
Wednesday, November 2, 11

14. Luca Candela
Wednesday, November 2, 11

15. Sencha Animator
Wednesday, November 2, 11

16. 100% CSS3
Animations
Wednesday, November 2, 11

17. Compatible with
most mobile devices
Wednesday, November 2, 11

18. Easy to use
Wednesday, November 2, 11

19. Gorgeous UI
Wednesday, November 2, 11

20. 100% Sencha
Wednesday, November 2, 11

21. Thank you!
Wednesday, November 2, 11