Post on 07-Nov-2014
description
transcript
Wednesday, November 2, 11
Arne Bech, Devshi Pindoria, Luca Candela
@arnebech, @devshi
@luckymethod
SENCHA ANIMATOR
Wednesday, November 2, 11
Sencha Animator
Wednesday, November 2, 11
Twitter mentions since launch day
1k+
Wednesday, November 2, 11
Animations everywhere
Wednesday, November 2, 11
Arne Bech
Wednesday, November 2, 11
CSS3 Transforms & Animations
Wednesday, November 2, 11
Translate/PositionScaleRotateSkew
Transform CSS
Wednesday, November 2, 11
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
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
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
Animations#someElement {
animation-name: moveLeftThenDown;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: both;
}
Wednesday, November 2, 11
Demo
Wednesday, November 2, 11
Luca Candela
Wednesday, November 2, 11
Sencha Animator
Wednesday, November 2, 11
100% CSS3 Animations
Wednesday, November 2, 11
Compatible with most mobile devices
Wednesday, November 2, 11
Easy to use
Wednesday, November 2, 11
Gorgeous UI
Wednesday, November 2, 11
100% Sencha
Wednesday, November 2, 11
Thank you!
Wednesday, November 2, 11